I am trying to loop through some sibling elements one at a time, and I am having trouble separating the process from just running through all matching elements at once. This has to be dynamic, as the list of items will vary and will not always be the same size. Examples below:

<div class="class">
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="class">
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="class">
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div>

I am trying to loop through some sibling elements one at a time, and I am having trouble separating the process from just running through all matching elements at once. This has to be dynamic, as the list of items will vary and will not always be the same size. Examples below:

<div class="class">
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="class">
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="class">
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div>

The goal is to limit the number of active elements in each list to 1. However, when I loop through the elements using a normal .each() loop, it runs through all of the lists at the same time and limits the total amount to 1 rather then 1 per list. The code is rather simple so far, as I don't have a solution to this problem.

$('.class').find('li').each(function() {

   // do something

});

I am curious of the basic task of looping through each of these lists individually and pleting the tasks rather then looping through all lists at once. I would rather not create a separate jQuery call for each possible list, and would prefer a single call to handle the task. Any help or ideas would be appreciated, I might be looking past a simple solution.

• javascript
• jquery
• loops
• each

7 Answers 7

Use nested loops, one for each list, then loop through the items in that list.

$(".class ul").each(function() {
    var active_count = 0;
    $(this).find("li").each(function() {
        // do something
    });
});

Loop your .class than:

$('.class').each(function() {

   var $li = $(this).find('li');
   // $li is now a collection of n LI elements inside the current .class

   $li.each(function () {
       // you can use $(this) at this point
   });

});

That's how jQuery's .find works, first you searched for elements matching .class, then in all of these you searched for li. You'd have to do something like this:

$('.class').each(function () {
   $(this).find('li')... 
});

Your code is saying "find all the elements named class. Then loop through the <li>s present".

Try something like:

$('.class').each(function(){
     $(this).find(li).each ...
}

Since each div with class ".class" contains a ul with li elements in which you want to have only one set as active, you would need to .each() on your divs and have an inner .each() on your li elements for each div.

    $('.class').each(function(i, ele){ 
        $(ele).find('li').each( function(i, ele) {} ); });

This snippet treats each list individually, and stores the first active item. Removes active from every li, then sets the original first active element to active. It also sets the first list item active if no item was active in this list.

$('.class').find('ul').each(function() {
  let firstActiveLink = $(this).children('li.active:first');
  $(this).children('li').removeClass('active');
  if (firstActiveLink.length) {
    firstActiveLink.addClass('active');
  } else {
    $(this).children('li:first-child()').addClass('active');
  }

});

.active {
  color: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class">
  <ul>
    <li class="active"></li>
    <li class="active"></li>
    <li class="active"></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li class="active"></li>
    <li class="active"></li>
    <li></li>
  </ul>
  <ul>
    <li class="active"></li>
    <li></li>
    <li class="active"></li>
    <li></li>
  </ul>
</div>

Thank you for all the help! I ended up solving my problem by adding in a data- field and incrementing that field. Using a simple less than if statement to see if the element had more then the correct amount of li's associated with it. If anyone is having a similar situation, let me know if you want to see the code.