过滤掉的父母的jQuery后代仍然在集合中

时间:2012-08-15 14:27:05

标签: jquery

目标:第三类内部的p标签上的没有红色轮廓。

下面的自包含示例,或jsfiddle:http://jsfiddle.net/WJVBm/

拼命期待获得绿色复选标记......提前感谢您的帮助!

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

2 个答案:

答案 0 :(得分:1)

试试这个http://jsfiddle.net/3JALD/

它可能会得到改善,但似乎可以满足您的需求。

myFilteredParagraphs找到了div.first的所有段落,因为myFilteredDivs属于find()p获取了所有div.first来自{{1}}的{​​{1}} {1}}。

答案 1 :(得分:1)

看起来像一个非常简单,可能是明显的修复:

http://jsfiddle.net/WJVBm/13/

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

使用直接子选择器>

那可以做你想要的吗?