How do I do a nested for-each loop with JQuery to get specific li elements?

Question

What I'm trying to do is essentially go through ul s which are organized like

<ul class="some-ul">
    <li class="some-li"></li>
    <li></li>    
    <li></li>
    <li class="some-li"></li>
</ul> 
<ul class="some-ul">
    <li class="some-li"></li>
    <li></li>    
    <li></li>
    <li></li>
</ul> 
<ul class="some-ul">
    <li class="some-li"></li>
    <li class="some-li"></li>    
    <li class="some-li"></li>
    <li class="some-li"></li>
</ul> 

and do something with the li s of class some-li and something else with the li s that don't have that class. So, it would be equivalent to

$('ul.some-class li.some-class').each(function() {
   // do something
});

$('ul.some-class li:not(.some-class)').each(function() {
   // do something else
});

except I want to do it like

$('ul.some-class').each(function() {
     // loop through the list elements of this list 
});

but I don't know how to construct that inner loop. Is this possible, and if so, what tool should I using?

Answer 1

Within .each , this will be the current element of the iteration. You can then use $(this).find() to find elements within it:

$('ul.some-ul').each(function(i, ul) {
    $(ul).find("li").each(function(j, li) {
        // Now you can use $(ul) and $(li) to refer to the list and item
        if ($(li).hasClass('some-li')) {
            ...
        }
    });
});

Answer 2

You can use hasClass and a CSS selector to get all immediate children (The <li> s) .

$('ul.some-class > li').each(function() {
     if ($(this).hasClass('some-class')) {
         //Do something
     } else {
         //Do something else
     }
});

Answer 3

Loop through all the <li> and use hasClass() to see if they fit the class you want or not and react accordingly

$('.some-ul').children().each(function(){
   // "this" is current li
   if ( $(this).hasClass('some-li') ){
       $(this).doSomeClassThing();
   } else {
        $(this).doNoClassThing();
   }    
});

One pass through and you are done

Answer 4

The callback of the each call gets the index and the element as arguments.

This way you can

$('ul.some-class').each(function(i, elt) { 
     $(elt, 'li.some-class').each ...
 });

https://api.jquery.com/jquery.each/