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

Question

假设您有以下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>

在root-component中，我希望选择具有component类的所有子元素，直到并且不包括具有script-component类的元素。这意味着在最后应该只选择具有a文本的元素(应该选择a2、a3、a4、a5、a6、a7和a8 )。

编辑:或者用Trung的话说:目标是一旦遇到script-component类，就跳过在树下搜索组件。

Edit2:或者换句话说:我希望选择所有的.component子级，直到遇到.script-component。

这可以使用jQuery和CSS来完成。

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

Answer 1

这将选择所有a组件。对它进行测试，看看它是否适合您的需求。

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

Answer 2

过滤函数对少于2个匹配项进行测试，因为我们需要包含出现在root-component目录中的类script-component。

​

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>

​