5

リスト内の 3 つの項目をそれぞれ分割して、その子にクラスを追加したい。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li><!--target list item-->
    <li>4</li>
    <li>5</li>
    <li>6</li><!--target list item-->
    <li>7</li>
</ul>

何か案が？

4

6 に答える 6

7

nth-child 疑似セレクターを使用する必要があります

$("ul li:nth-child(3n)").addClass("break-here");
于 2012-04-14T15:15:01.827 に答える
5

そのための CSS 疑似セレクターがあります。

:nth-child(xn+y)

から始まるすべてxの子を選択yするので、あなたの場合x = 3とy = 1（デフォルト）

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

http://jsfiddle.net/8WDK4/のデモ

http://www.w3.org/TR/selectors/#nth-child-pseudoと例を参照してください

于 2012-04-14T15:14:59.487 に答える
0 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li><!--target list item-->
    <li>4</li>
    <li>5</li>
    <li>6</li><!--target list item-->
    <li>7</li>
</ul>

<script type="text/javascript">
i = 0;
$.each($("li"), function(key,value) {
    i++;
    if (i % 3 == 0) {
        //Do things
    }

})
</script>
于 2012-04-14T15:18:14.330 に答える
0 
$("li")​.each(function(index,item){
    console.debug(index)
    if(index % 3 == false){
        $(this).addClass("newClass");
    }
})​

これはトリックになります

http://jsfiddle.net/TYuAn/

于 2012-04-14T15:19:03.417 に答える
0

疑似セレクターを使用しない別のソリューション

collection.each(function(i, item){
    if(! i%3) {
        $(item).addClass('c');
    }
});
于 2012-04-14T15:22:23.523 に答える
0 
$('ul li').each(function(i,e){
  $(e).eq((i+1)%3).addClass('red');
});

デモjsbin

于 2012-04-14T15:44:40.317 に答える