Как добавить класс в конкретный ли?

Question

У меня есть этот HTML:

<ul class="how-long"> 
    <li value="1">Any</li> 
    <li value="1">1 day</li> 
    <li value="2">Week end</li> 
    <li value="7">1 Week</li> 
    <li value="14">2 Week</li> 
    <li value="21">3 Week</li> 
</ul> 

О документе готового Я хочу, чтобы добавить новый класс 4 Li элемента.

Это то, что я пробовал:

$(".how-long li").slice(3).addClass('change-color'); 

Если я ставлю тревогу как:

alert($(".how-long li").slice(3).html()); 

это дает мне 1 неделю который является правильным, но когда я addclass добавлен класс для всех li после 4-го ли.

Я хочу этого без добавления ID каждому элементу li. Я могу жестко кодировать класс в элементе li напрямую, но я хочу сделать это динамически с помощью jQuery.

Answer 1

Чтобы сделать это в одном селекторе, используйте nth-child или eq:

nth-child является значительно быстрее см мой JSPerf здесь: http://jsperf.com/nth-child-vs-eq

nth-child:

$(".how-long li:nth-child(4)").addClass('change-color'); 

eq:

$(".how-long li:eq(3)").addClass('change-color'); 

Основное отличие состоит в том, что nth-child даст вам 4-й элемент каждый элемент с этим классом (независимо от того, является ли он потомком текущего пункта), в то время как eq будет дать вам детей по текущему предмету.

Answer 2

$(".how-long li").eq(3).addClass('change-color'); 

Answer 3

slice не возвращает объект jQuery, поэтому вы не можете использовать метод addClass. Правильный способ сделать то, что вы собираетесь это:

индексом:

$(".how-long li").eq(3).addClass('change-color'); 

по ссылающегося значение:

$(".how-long li[value=7]").addClass('change-color'); 

Answer 4

ли это так

$(".how-long li:nth-child(4)").attr({'class':'test'}); 

Это добавит класс test до 4-го числа li

Надежда это HEPS

Answer 5

Если вы хотите использовать метод среза необходимо указать конечный атрибут, который вы пропускаете

$(".how-long li").slice(3,4).addClass('change-color'); 

Answer 6

Он выбирает 4-го, потому что начальный индекс массива от 0.

Вы всегда можете использовать $ ('. While li: nth-child (4)');

Более подробная информация здесь: http://api.jquery.com/nth-child-selector/

Answer 7

Вы можете использовать nth-child selector:

$(".how-long li:nth-child(4)").addClass('change-color'); 

alert($(".how-long li:nth-child(4)").html());