Добавление класса согласно LI постион

У меня есть ниже разметки,Добавление класса согласно LI постион

<ul> 
<li>1</li> //light BG 
<li>2</li> 
<li>3</li> 
<li>4</li> //light BG 
<li>5</li> 
<li>6</li> 
...... 
</ul>

Я хочу, чтобы добавить класс dark и light, в соответствии с положением li.

Первый li должен быть light
второй, третий должен быть dark
четвёртая, пятая должна быть light
же картина ....

источник

2012-06-08 ashokcc

Есть причина, почему вы не хотите использовать CSS3 селекторы для этого? Просто любопытно. – Zeta

http://api.jquery.com/nth-child-selector/ – Thomas

$('ul li:nth-child(3n-2)').addClass('light'); 

$('ul li::not(:nth-child(3n-2))').addClass('dark');

DEMO

источник

2012-06-08 06:58:33 thecodeparadox

Я просто посмотрел документацию nth-child. Не было бы лучше использовать eq()? «С: nth-child (n), все дети подсчитываются независимо от того, что они ... С: eq (n) учитывается только селектор, прикрепленный к псевдоклассу« – Thomas

@Thomas Я пойду за ' : nth-child', лучше для вашей ситуации и проще всего – thecodeparadox

Является ли это шаблон, который вы после:

http://jsfiddle.net/rCkQV/

Если другие из них темные, они могут только наследовать набор классов для всех Ли и света переопределяет это.

$("ul li:nth-child(4n),ul li:nth-child(4n+1)").addClass("light");

источник

2012-06-08 07:00:14

Играйте с оператором modulo, это весело!

$('li').each(function() { 
    // Cache some variables 
    var el = $(this), 
     index = el.index(); 

    if (index % 3 === 0 || index % 3 === 1) { 
     el.addClass('light'); 
    } 
    else { 
     el.addClass('dark'); 
    } 
});

_{PS: спасибо Zeta за помощь мне с операциями по модулю/о/}

источник

2012-06-08 07:03:50

Добавление класса согласно LI постион

ответ

Смежные вопросы