查找没有特定祖先的后代元素
查找没有特定祖先的后代元素
提问于 2019-06-06 06:32:05
我希望能够选择一个元素并查找具有特定类的所有后代元素，但不包含在类似的父元素中。很难描述：
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
回答 2
Stack Overflow用户
发布于 2019-06-06 15:29:17
您必须进行一些过滤以仅计算.b最接近的.js-test等于的出现次数element：
element.find('.b').filter(function() {
return $(this).closest('.js-test').is(element);
}).length;
这是一个小提琴
Stack Overflow用户
发布于 2019-06-06 15:53:03
选择器.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祖先是否为上下文元素进行过滤。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006952
复制相关文章
相似问题