JQuery – Как добавить класс к каждому последнему элементу списка?

Question

Здесь есть код, который не работает:

$("#sidebar ul li:last").each(function(){
      $(this).addClass("last");
});

По сути, у меня есть 3 списка, и я хочу добавить класс (последний) к каждому элементу, который появляется последним в каждом неупорядоченном списке.

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li class="last">Item 3</li>
</ul>

Надеюсь, это имеет смысл, ура!

Answer 1

Легко совершить ошибку.Попробуй это:

$("#sidebar ul li:last-child").addClass("last");

По сути, :last не совсем делает то, что вы думаете.Он соответствует только самому последнему в документе, а не последнему в каждом списке.Вот для чего нужен :last-child.

Answer 2

с помощью jquery добавьте это

$("ul li").last().addClass('last');

Answer 3

Причина, по которой это не сработает, заключается в том, что :last соответствует только одному элементу.Из документации jQuery:

Соответствует последнему выбранному элементу.

Итак, ваш код получает набор всех <li> элементы в <ul> а затем из этого набора берется последнее значение.Пример:

 <ul>
   <li>1</li>
   <li>2</li>
 </ul>
 <ul>
   <li>3</li>
   <li>4</li>
 </ul>
 <ul>
   <li>5</li>
   <li>6</li>
 </ul>

Ваш код вернет элемент <li>6</li>.(Внутренне он будет собирать <li>1</li> к <li>6</li> а потом отрубить последний и вернуть его).

То, что вы ищете, - это то, что сказали другие ответы здесь: :last-child.

Answer 4

Или вы можете дать своему списку идентификатор и использовать его как контекст для вызова jquery.

<ul id="myList">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<ul id="anotherList">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

И тогда вы можете сделать:

jQuery("li:last", "ul#myList").addClass("lastItem");

Теперь последний ли в первом списке будет иметь класс «lastItem».

Редактировать:Извините, неправильно прочитал вопрос.Проигнорируйте это, пожалуйста.

Answer 5

Если вам нужно добавить класс в 3 отдельных списка, вы можете назначить для них класс и использовать «каждый»:

$('#sidebar ul.class li:last-child').each(function(e){
    $(this).addClass("last");
});

Это должно работать именно так, как вы ожидали.

Answer 6

можешь попробовать

$('#sidebar ul li:last').addClass('last');