代码之家 › 专栏 › 技术社区 › kawnah

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

each for-loop jquery javascript

kawnah · 技术社区 · 6 年前

我正在努力理解如何获取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添加一个类,而且还要向系列中的最后一个ul添加一个类,而不考虑列表的数量。答案 .each()集合中的最后一个元素建议简单地交叉引用 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");
    }
  });
});

<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循环中的最后一个元素并修改其DOM属性?

1 回复 | 直到 6 年前

Kosh 6 年前

这很容易做到:

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