Home/ Questions/Q 8391505
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T19:16:50+00:00

Goal: no red outlines on p tags inside of .third classes. Self-contained example below,

  • 0

Goal: no red outlines on p tags inside of .third classes.

Self-contained example below, or jsfiddle here: http://jsfiddle.net/WJVBm/

Desperately looking forward to awarding a green checkmark… Thanks in advance for any help!

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this http://jsfiddle.net/3JALD/

    It probably can be improved but it seems to do what you need.

    All of the paragraphs were found for myFilteredParagraphs because div.first was part of myFilteredDivs and find() gets all of the ps that are descendent from div.first.

    • 0