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

Question

我正在努力理解如何获取 each() 循环中的最后一项。我上周就这个话题提出了一个问题，可以在这里看到：.find() 与循环的关系，each() 和这个关键字 - .find() 在它应该只有 2 时返回 4

最初的要求是检查 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 个列表以及是否添加了一个类。

现在下一步不仅要向具有多个列表的 div 添加一个类，还要向该系列中的最后一个 ul 添加一个类，而不考虑列表的数量。答案Last element in .each() set建议简单地交叉引用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 属性？

标签： javascriptjqueryfor-loopeach

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>