получение последнего элемента в цикле each()

Я изо всех сил пытаюсь понять, как получить последний элемент в цикле each(). На прошлой неделе я задал вопрос по этой теме, который можно увидеть здесь: .find() связь с циклами, each() и this ключевым словом - .find() возвращает 4, когда должно быть только 2

Первоначальное требование состояло в том, чтобы проверить серию uls внутри uls, и если было более 1 списка, мне нужно добавить класс. Теперь мне нужно использовать этот код, где, если внутри div более трех списков, или это последний ul в серии, мне также нужно добавить класс к последнему ul .

Я провел исследование по этой теме и буду ссылаться на этот ответ: Последний элемент в наборе .each()< /а>

$(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>

Теперь следующий шаг — не только добавить класс в div с более чем 1 списком, но и последний ul в серии, независимо от количества списков. Ответ Последний элемент в наборе .each() предлагает просто перекрестную ссылку index и посмотреть если вы находитесь на последнем пункте.

Самый высокий ответ говорит:

Сравните index с длиной набора, и все готово:

Эта концепция, интегрированная в мой образец, выглядит так:

$(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>

Ожидаемое/желаемое поведение состоит в том, чтобы добавить красный цвет к последнему элементу, но, к сожалению, этого не происходит.

Как можно рассматривать как меру устранения неполадок, запись консоли в это условное выражение ничего не возвращает. Так это не последний элемент массива? Как бы вы изменили его/нацелили на него? Что представляет собой это условное выражение? Поскольку ведение журнала консоли ничего не делает, как можно устранить неполадки в этом коде?

Как вы попадаете в последний элемент в каждом цикле и изменяете его свойства DOM?