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");

По сути: последний не совсем делает то, что вы думаете, он делает. Он соответствует только самому последнему в документе, а не последнему в каждом списке. Вот что: последний ребенок для.

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

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

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

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

Answer 5

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

<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");

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

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

Answer 6

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

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