jQuery在parent下面找到所有类的元素，即使在children元素中也是如此

Question

Here is some sample HTML:

<div class="parent">
    <div class="searchEl"></div>
    <div class="searchEl"></div>
    <div class="child">
        <div class="searchEl"></div>
        <div class="searchEl"></div>
    </div>
</div>

And here is a jQuery function:

$(function(){
    $(".parent>.searchEl").each(function(){
        $(this).html("Found this one");
    });
});

The DOM elements will end up like so:

<div class="parent">
    <div class="searchEl">Found this one</div>
    <div class="searchEl">Found this one</div>
    <div class="child">
        <div class="searchEl"></div>
        <div class="searchEl"></div>
    </div>
</div>

Using jQuery/Javascript, how can I search for and find all the elements with class .searchEl beneath the element .parent , even if they are within another child element, without searching the document globally with $(".searchEl") ?

Answer 1

Use a space instead of >

  $(function() { $(".parent .searchEl").each(function() { $(this).html("Found this one"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="parent"> <div class="searchEl"></div> <div class="searchEl"></div> <div class="child"> <div class="searchEl"></div> <div class="searchEl"></div> </div> </div> 

Answer 2

Remove > from your select

$(".parent .searchEl").

You can use the .find() method also,

$(".parent").find(".searchEl")

Answer 3

> will select only direct descendants/children. Remove > to select all the descendant elements.

$(".parent .searchEl")

You can also use find()

$(".parent").find(".searchEl")