筛选出的父项的jQuery子代仍在集合中_Jquery

筛选出的父项的jQuery子代仍在集合中

jquery

筛选出的父项的jQuery子代仍在集合中,jquery,Jquery,目标：否三等舱内p标签上的红色轮廓下面是自包含的示例，或者这里是JSFIDLE：绝望地期待着授予一个绿色的复选标记。。。提前感谢您的帮助 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/j

目标：否三等舱内p标签上的红色轮廓

下面是自包含的示例，或者这里是JSFIDLE：

绝望地期待着授予一个绿色的复选标记。。。提前感谢您的帮助

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var myDivs = $('div');

        var myFilteredDivs = myDivs.filter(function(){
            return $(this).closest('.third').length == 0;
        });

        var myFilteredParagraphs = myFilteredDivs.find('p'); // why does this find paragraphs in divs that have already been filtered out of the collection?

        myDivs.css('border', '1px solid #CCC');
        myFilteredDivs.css('border', '1px solid blue');
        myFilteredParagraphs.css('border', '1px solid red'); // paragraphs inside of divs that should not exist in the collection are still being outlined by a red border

    });
    </script>
    <style type="text/css">
        div { float: left; padding: 20px; margin: 5px; }
    </style>
</head>

<body>

    <div class="first">
        <p>first</p>
        <div class="second">
            <p>second</p>
            <div class="third">
                <p>third</p>
            </div>
        </div>
        <div class="second">
            <p>second2</p>
        </div>
        <div class="third">
            <p>third2</p>
        </div>
    </div>

</body>
</html>


$（函数（）{
var myDivs=$（'div'）；
var myFilteredDivs=myDivs.filter（函数（）{
返回$（this）.最近（'.third'）。长度==0；
});
var myFilteredParagraphs=myFilteredDivs.find（'p'）；//为什么会在已从集合中筛选出来的div中查找段落？
css（'border'，'1px solid#CCC'）；
css（'border'，'1px纯蓝色'）；
myFilteredParagraphs.css（'border'，'1px solid red'）；//div中不应存在于集合中的段落仍由红色边框勾勒出来
});
div{float:left；padding:20px；margin:5px；}
首先
第二
第三
第二
第三个2

试试这个

它可能可以改进，但它似乎可以满足您的需要

所有段落都是为

myFilteredParagraphs

找到的，因为

div.first

是

myFilteredDivs

的一部分，而

find（）

获取了

div.first

派生的所有

似乎是一个非常简单、也许显而易见的修复：

使用直接子选择器

这是否符合您的要求？

这是因为它们也是其他未过滤元素的后代。根据实际标记的不同，您可能会使用

children（）

而不是

find（）

。问题是

myDivs

在每个匹配中包含每个div及其嵌套的子级。添加

console.log（myDivs）并且您可以在输出中看到它。
var myFilteredParagraphs = myFilteredDivs.find('> p'); // why does this find paragraphs in divs that have already been filtered out of the collection?