получить последний элемент в цикле each () - PullRequest
Новая
       34

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

0 голосов
/ 04 декабря 2018

Я изо всех сил пытаюсь понять, как получить последний элемент в цикле each ().На прошлой неделе я задал вопрос на эту тему, который можно увидеть здесь: .find () отношение с циклами, each () и этим ключевым словом - .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 и есть ли добавить класс.

Теперь следующим шагом является не только добавление класса в 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?

1 Ответ

0 голосов
/ 04 декабря 2018

Это так же просто, как: 

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