CODEWITHSUNDEEP
javascriptjqueryfor-loopeach
kawnah
kawnah

Reputation: 3424

getting last item in an each() loop

I'm struggling to understand how to get the last item in an each() loop. I asked a question last week on this topic, which can be seen here: .find() relationship with loops, each() and this keyword - .find() returning 4 when it should only be 2

The original requirement was to check a series of uls inside uls, and if there were more than 1 lists I need to add a class. Now - I need to build upon this code where if there are more than three lists inside a div, or it is the last ul in a series, I need to add a class to the last ul as well.

I did research on the topic and will be referencing this answer: Last element in .each() set

For reference, the first sample case is below:

$(function(e) {
  var getMenuItems = $(".item");
  getMenuItems.each(function( index ) {
  	if ($(this).find("ul.sub-menu").length > 0) {
      $(this).addClass("red");
    }
  });
});
.red {background-color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
   </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
</ul>

This code just checks if there are more than 1 lists inside a div and if there are add a class.

Now the next step is to not only add a class to the divs with more than 1 list but the last ul in the series irregardless of amount of lists. The answer Last element in .each() set suggests to simply cross reference index and see if you are at the last item.

The highest upvoted answer says to:

Check index against the length of the set and you're good to go:

That concept integrated into my sample looks like this:

$(function(e) {
  var getMenuItems = $(".item");
  var howManyListItems = getMenuItems.length;
  getMenuItems.each(function( index ) {
  	if ($(this).find("ul.sub-menu").length > 0) {
      $(this).addClass("red");
    } else if (index == (howManyListItems.length - 1)) {
      console.log($(this));
      $(this).addClass("red");
    }
  });
});
.red {background-color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
   </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
</ul>

The expected/desired behavior is to add the red to the last item but sadly that does not happen.

As can be seen as a troubleshooting measure, console logging this into that conditional returns nothing. So is that not the last item of the array? How would you modify it/target it? What does that conditional represent? Since console logging does nothing, how does one go about troubleshooting this code?

How do you hit the last element in an each loop and modify it's DOM properties?

Upvotes: 0

Views: 748

Answers (1)

Kosh
Kosh

Reputation: 18444

This is as easy as:

$(function(e) {

  $(".sub-menu:last-of-type").last().addClass("red");
  
});
.red {background-color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
   </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
</ul>

Upvotes: 1

Related Questions