JQuery - Как добавить класс к каждому последнему элементу списка?
Есть код, который не работает:
$("#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>
Надеюсь, что это имеет смысл,
Ура!
Ответы
Ответ 1
Легкая ошибка. Попробуйте следующее:
$("#sidebar ul li:last-child").addClass("last");
В принципе: последнее не совсем так, как вы думаете. Он соответствует только последнему в документе, а не последнему в каждом списке. Для этого: для последнего ребенка.
Ответ 2
с jquery добавьте это
$("ul li").last().addClass('last');
Ответ 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
.
Ответ 4
Или вы можете указать свой список id и использовать его в качестве контекста для 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".
Изменить: Извините, неправильно прочитал вопрос. Игнорируйте это, пожалуйста.
Ответ 5
Если вам нужно добавить класс в 3 отдельных списка, вы можете назначить для них класс и использовать "каждый":
$('#sidebar ul.class li:last-child').each(function(e){
$(this).addClass("last");
});
Это должно работать точно так, как вы ожидали.
Ответ 6
вы можете попробовать
$('#sidebar ul li:last').addClass('last');