查找没有特定祖先的后代元素

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (19)

我希望能够选择一个元素并查找具有特定类的所有后代元素,但不包含在类似的父元素中。很难描述:

HTML:

<div class="js-test js-1">
    <div class="b">1</div>
    <div class="b">1</div>
    <div class="d">
        <div class="b">1</div>        
    </div>
    <div class="js-test js-2">
        <div class="b">2</div>
        <div class="b">2</div>
        <div class="b">2</div>
        <div class="d">
            <div class="b">2</div>        
        </div>
        <div class="js-test js-3">
            <div class="b">3</div>
            <div class="b">3</div>
            <div class="b">3</div>
            <div class="b">3</div>
            <div class="d">
                <div class="b">3</div>        
            </div>
        </div>
    </div>
</div>

尝试jQuery:

$(document).ready(function(){
    function test(element)
    {
        var test2 = element.find('.b :not(.js-test .b)');
        console.log(test2.length);
    }

    console.clear();
    test($('.js-1'));
    test($('.js-2'));
    test($('.js-3'));
});

预期成绩:

3 4 5

实际结果:

0 0 0

JsFiddle示例

提问于
用户回答回答于

您必须进行一些过滤以仅计算.b最接近的.js-test等于的出现次数element

element.find('.b').filter(function() {
    return $(this).closest('.js-test').is(element);
}).length;

这是一个小提琴

用户回答回答于

选择器.b :not(.js-test .b)查找.b不是.js-test .b元素的元素的后代。这个选择器的问题有两个:

  • 每个.b元素都是元素的后代.js-test。这包括.b直接嵌套在您正在测试的每个上下文.js-test元素中的元素。
  • 第一个.b和第二个之间的空间:not()代表一个后代选择器,这也意味着被表示的元素:not()很可能:not(.b)完全和仍然匹配。 但是你的.b元素都没有任何元素后代,这就是为什么你的所有测试结果都为零的真正原因。

由于您无法直接创建与上下文元素(参数element)对应的选择器,因此您需要编写自定义过滤器函数,如billyonecan提供的函数,并根据其最近的.js-test祖先是否为上下文元素进行过滤。

扫码关注云+社区

领取腾讯云代金券