javascript - Can jquery.find() select only direct children? - Stack Overflow

admin管理员组

文章数量:1279236

What argument should I provide to jQuery.find() to select the elements children and no other elements? I can't lead the selector with '>' and having '*' will select all descendants, not only direct children.

I am aware of jQuery.children(), but this is for a library so the user is able to provide their own selector, and I want to make sure they have some way of selecting just the direct children (without adding lots of my own logic).

edit

I want to use jQuery.find() to only find elements within the first level children of a parent element, not children of children.

Example:

<parent>
  <child-1>
    <child-2></child-2>
  </child-1>
  <child-1>
  </child-1>
</parent>

I want to only search through the elements child-1 and not their children (i.e. child-2)

*EDIT:**

For more explanation, it is a Angular directive that goes on a table element. The directive needs to be able to find the table rows, but is meant to go on a wide variety of templates so it can have a selector for the rows. Sometimes the rows have no distinct features outside of being child divs to the original element; other times, the rows are grandchildren or even great-grandchildren.

What argument should I provide to jQuery.find() to select the elements children and no other elements? I can't lead the selector with '>' and having '*' will select all descendants, not only direct children.

I am aware of jQuery.children(), but this is for a library so the user is able to provide their own selector, and I want to make sure they have some way of selecting just the direct children (without adding lots of my own logic).

edit

I want to use jQuery.find() to only find elements within the first level children of a parent element, not children of children.

Example:

<parent>
  <child-1>
    <child-2></child-2>
  </child-1>
  <child-1>
  </child-1>
</parent>

I want to only search through the elements child-1 and not their children (i.e. child-2)

*EDIT:**

For more explanation, it is a Angular directive that goes on a table element. The directive needs to be able to find the table rows, but is meant to go on a wide variety of templates so it can have a selector for the rows. Sometimes the rows have no distinct features outside of being child divs to the original element; other times, the rows are grandchildren or even great-grandchildren.

• javascript
• jquery
• angularjs

Share Improve this question Follow edited Jul 16, 2015 at 22:45 cнŝdk 32.2k77 gold badges6060 silver badges8080 bronze badges asked Jul 16, 2015 at 18:32 Tahsis ClausTahsis Claus 1,92911 gold badge1717 silver badges2727 bronze badges 7

• Can you give an example usage? I don't understand what you're trying to do. – Evan Davis Commented Jul 16, 2015 at 18:37
• I have a function that takes a jQuery and a selector and the function needs to be able to select the children in some cases, but select grandchildren in another case. Both those cases requires some sort of depth in the selector, but .find() doesn't really seem to work with specific depths (as there is no way to determine depth relative to original element). – Tahsis Claus Commented Jul 16, 2015 at 18:40
• Can you show code of an example usage? I still don't understand what you're trying to do. – Evan Davis Commented Jul 16, 2015 at 18:41
• so you want to use find to only find within the first level children, not children of children? – Abdul Ahmad Commented Jul 16, 2015 at 18:41
• 1 This is an XY Problem. – Evan Davis Commented Jul 16, 2015 at 18:46

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 8

Start your selector with > as you mentioned in your question. Try it:

var s = ".classA",
    n = $('#wrapper').find('>'+s).length;

alert('Found '+ n +' direct children of #wrapper with the "'+ s +'" selector.'); // 3

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="wrapper">
    <div class="classA"></div>     <!-- Selected -->
    <div class="classA">           <!-- Selected -->
        <div class="classA"></div> <!-- Ignored -->
    </div>
    <div class="classC">
        <div class="classA"></div> <!-- Ignored -->
    </div>
    <div class="classB">
        <div class="classB"></div>
    </div>
    <div class="classA"></div>     <!-- Selected -->
</div>

Or use $.children(), as you mentioned it in your question:

var s = ".classA",
    n = $('#wrapper').children(s).length;

alert('Found '+ n +' direct children of #wrapper with the "'+ s +'" selector.'); // 3

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="wrapper">
    <div class="classA"></div>     <!-- Selected -->
    <div class="classA">           <!-- Selected -->
        <div class="classA"></div> <!-- Ignored -->
    </div>
    <div class="classC">
        <div class="classA"></div> <!-- Ignored -->
    </div>
    <div class="classB">
        <div class="classB"></div>
    </div>
    <div class="classA"></div>     <!-- Selected -->
</div>

I am aware of jQuery.children(), but this is for a library so the user is able to provide their own selector

But JQuery's .children() receives a selector as parameter:

.children( [selector ] )
Description: Get the children of each element in the set of matched elements, optionally filtered by a selector.

https://api.jquery./children/

Use Immediate Child Elements with > this is the code you need:

elemnt.find("> selector");

That should do the trick.

本文标签： javascriptCan jqueryfind() select only direct childrenStack Overflow