Question

假设您有以下HTML：

albumTracks

从<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文本（a2，a3，a4，a5，a6，a7和a8）的元素。

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

Edit2：或者换句话说：我想选择所有a个孩子，直到遇到.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个匹配项进行过滤函数测试，因为我们需要在script-component div中包含类root-component。

＆＃13;

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");

＆＃13;

div {
    margin-left: 30px;
}

＆＃13;

<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>

＆＃13;

选择具有某个类的所有后代HTML元素，这些元素不具有中间具有其他特定类的元素

2 个答案: