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

Question

我希望能够选择一个元素，并找到所有具有特定类的子代元素，但不包含在类似的父元素中。很难形容：

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

Answer 1

您必须进行一些筛选，以便只计算最近的.b值等于element的次数。

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

这里有把小提琴

Answer 2

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

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

由于不能直接创建与上下文元素(参数element)相对应的选择器，因此需要编写一个自定义过滤器函数，类似于billyonecan提出的函数，并根据其最近的.js-test祖先是否是上下文元素进行筛选。

Answer 3

试一试

// descendant `.b` of `element`,
// descendant `.b` of `element`, not `.b`, not `.js-test`
var test2 = element.find("> .b, > :not(.b):not(.js-test) .b");

jsfiddle http://jsfiddle.net/ku2pdn2j/4/

​

    $(document).ready(function(){
        function test(element) {
            var test2 = element.find("> .b, > :not(.b):not(.js-test) .b");
            console.log(test2.length, test2);
        }
        
        console.clear();
        test($('.js-1'));
        test($('.js-2'));
        test($('.js-3'));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
   <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>

​