私は以下のマークアップを持っています、
<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
- 2番目、3番目は
dark
- 4番目、5番目のはずです
light
- 同じパターン……
私は以下のマークアップを持っています、
<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
$('ul li:nth-child(3n-2)').addClass('light');
$('ul li::not(:nth-child(3n-2))').addClass('dark');
モジュロ演算子で遊んでみてください。楽しいです!
$( '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に感謝します /o/
これはあなたが求めているパターンですか?
他のものが暗い場合、それらはすべてのLIに設定されたクラスを継承することができ、ライトはこれをオーバーライドします。
$("ul li:nth-child(4n),ul li:nth-child(4n+1)").addClass("light");