javascript - 获取each()循环中的最后一项

Question

我正在努力理解如何获取each()循环中的最后一项。我上周就这个主题提出了一个问题，可以在这里看到:.find() relationship with loops, each() and this keyword - .find() returning 4 when it should only be 2

最初的需求是检查uls里面的一系列uls，如果有超过1个列表我需要添加一个类。现在 - 我需要在此代码的基础上构建，如果 div 内有超过三个列表，或它是系列中的最后一个 ul，我还需要向最后一个 ul 添加一个类。

我对这个主题进行了研究，并将引用这个答案:Last element in .each() set

作为引用，第一个示例案例如下:

$(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 个列表，以及是否添加一个类。

现在，下一步不仅要向具有超过 1 个列表的 div 添加类，还要向该系列中的最后一个 ul 添加类，无论列表的数量有多少。答案Last element in .each() set建议简单地交叉引用 index 并查看是否位于最后一项。

得票最高的答案是:

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

集成到我的示例中的概念如下所示:

$(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 属性？

Answer 1

这很简单:

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