选择具有某个类的所有后代HTML元素，这些元素之间没有包含其他特定类的元素

Assume you have the following HTML:

假设您有以下HTML:

<div id="root-component" class="script-component">a0
            <div></div>
            <div class="component">a2</div>
            <div class="script-component">b
                <div class="component">b1
                    <div class="script-component">c
                    </div>
                    <div class="component">b2
                    </div>
                </div>
            </div>
            <div class="component">a3</div>
            <div class="component">a4</div>
            <div>            
                <div class="component">a5</div>
            </div>
            <div class="component"> a6            
                <div class="component">a7</div>
            </div>
            <div class="component">a8
                <div class="script-component"></div>
            </div>
</div>

From the root-component I would like to select all child elements with a component class until and not including the elements with the script-component class. This means at the end only the elements with an a text (a2, a3, a4, a5, a6, a7 and a8 should be selected) should be selected.

从根组件我想用组件类选择所有子元素,直到并且不包括带有脚本组件类的元素。这意味着最后只应选择带有文本的元素(应选择a2,a3,a4,a5,a6,a7和a8)。

Edit: Or in Trung's words: The goal is to skip searching for components down the tree once script-component class is encountered.

编辑:或者用Trung的话说:一旦遇到脚本组件类,目标是跳过在树下搜索组件。

Edit2: Or in even other words: I would like to select all .component children until a .script-component is encountered.

Edit2:或者换句话说:我想选择所有.component子项,直到遇到.script-component。

It can be done using jQuery and CSS.

它可以使用jQuery和CSS完成。

You can use this jsFiddle http://jsfiddle.net/pgegsjja/ to try it out.

您可以使用此jsFiddle http://jsfiddle.net/pgegsjja/来试用它。

2 个解决方案

#1

This selects all the a components. Test it out and see if it suits your requirements.

这将选择所有组件。测试一下,看看它是否符合您的要求。

$('#root-component').find(".component").siblings(':not(.script-component)').css("color", "red");

#2

Filter function tests against less than 2 matches because we need to include class script-component occurring in the root-component div.

过滤函数测试少于2个匹配,因为我们需要包含在根组件div中出现的类脚本组件。

jQuery.expr[':'].parents = function (a, i, m) {
    return jQuery(a).parents(m[3]).length < 2;
};

// The b2 element is still selected so it is not yet correct
$('#root-component').find(':not(.script-component) .component, >.component').css("color", "red");

$('.component').filter(':parents(.script-component)').css("color", "blue");

div {
    margin-left: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root-component" class="script-component">a0
    <div></div>
    <div class="component">a2</div>
    <div class="script-component">b
        <div class="component">b1
            <div class="script-component">c</div>
            <div class="component">b2</div>
        </div>
    </div>
    <div class="component">a3</div>
    <div class="component">a4</div>
    <div>
        <div class="component">a5</div>
    </div>
    <div class="component">a6
        <div class="component">a7</div>
    </div>
    <div class="component">a8
        <div class="script-component"></div>
    </div>
</div>

#1