Question

我正在努力了解如何获取each（）循环中的最后一项。上周，我问了一个与此主题有关的问题，可以在此处查看：.find() relationship with loops, each() and this keyword - .find() returning 4 when it should only be 2

最初的要求是检查ul内部的一系列ul，如果列表超过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添加到div中。答案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属性？

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>

在each（）循环中获取最后一个项目

1 个答案: