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


what argument should provide jquery.find() select elements children , no other elements? can't lead selector '>' , having '*' select descendants, not direct children.

i aware of jquery.children(), library user able provide own selector, , want make sure have way of selecting direct children (without adding lots of own logic).

edit

i want use jquery.find() find elements within first level children of parent element, not children of children.

example:

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

i want search through elements child-1 , not children (i.e. child-2)

*edit:**

for more explanation, angular directive goes on table element. directive needs able find table rows, meant go on wide variety of templates can have selector rows. rows have no distinct features outside of being child divs original element; other times, rows grandchildren or great-grandchildren.

start selector > mentioned in question. try it:

var s = ".classa",      n = $('#wrapper').find('>'+s).length;    alert('found '+ n +' direct children of #wrapper "'+ s +'" selector.'); // 3
<script src="https://ajax.googleapis.com/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(), mentioned in question:

var s = ".classa",      n = $('#wrapper').children(s).length;    alert('found '+ n +' direct children of #wrapper "'+ s +'" selector.'); // 3
<script src="https://ajax.googleapis.com/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>


Comments