Question

我有3个代码块（li项目组），每个块需要一个单独的CSS。由于代码是动态的，我无法为li项目分配ID以将其置于我的控制之下。如何向header1添加单独的CSS到3 li项目，向标题2添加3 li项目，向标题3添加3 li项目

<ul class="tree">
    <li id="section">Header1 </li>
    <li> 1</li>
    <li> 2</li>
    <li> 3</li>
    <li id="section"> Header 2</li>
    <li> 4</li>
    <li> 5</li>
    <li> 6</li>
    <li id="section"> Header 3 </li>
    <li> 7</li>
    <li> 8</li>
    <li> 9</li>
</ul>

Answer 1

您可以使用jQuery map函数运行自己的自定义逻辑，了解应用的内容/时间：

$('.tree li').map(function(index, element){

    switch(index % 4)
    {
        case 0:
          $(element).addClass('header');
          break;
        default:
          //do nothing
          break;
    }

})

jsFiddle Demo

编辑：根据@jstq的答案获得灵感，我已将案例陈述更改为使用模数。它使它更具可扩展性。

Answer 2

Jquery脚本：

for ( var i = 1; i < 12; i++ ) {
    if (i % 4 !=0)
    $(".tree li:eq("+i+")").css( "background", "red" );
}

你可以做任何你想要的条件

单独陈述：

for ( var i = 1; i < 12; i++ ) {
    if (i % 4 !=0) 
    {
        if (i<5)
            $(".tree li:eq("+i+")").css( "background", "blue" );
        else if (i<8)
            $(".tree li:eq("+i+")").css( "background", "green" );
        else 
            $(".tree li:eq("+i+")").css( "background", "red" );
    }
}

Answer 3

由于您无法控制将id或class es添加到所需元素，因此可以采用以下方法：

var listItems = $('.tree li');
var group = 0;
for (var i = 0; i < listItems.length; i++) { //Note: You may use jquery iterator also
    var item = $(listItems[i]);
    if (item.attr('id') === 'section') {
        group++;
    }
    switch(group) {
        case 1:
            item.addClass('group1');
        break;

        case 2:
            item.addClass('group2');
        break;

        case 3:
            item.addClass('group3');
        break;
    }
}

现在在CSS中定义具有所需背景颜色的group1，group2和group3 CSS类，您就完成了！

小提琴：http://jsfiddle.net/RVj4k/1/

Answer 4

尝试将其作为CSS

li:nth-child(-n+12) {
    color: red;   
}
li:nth-child(-n+8) {
    color: blue;   
}
li:nth-child(-n+4) {
    color: green;   
}

来源：http://css-tricks.com/useful-nth-child-recipies/

jQuery将css添加到未排序列表中的少数列表项

4 个答案: