将类应用于每个第1和第4项

Question

我有16个项目的清单.每行有4行,每行4个项目.如何将".first"类添加到每行的第一项,将".fourth"添加到每行的第四项.

导致:

<ul>
  <li class="first"></li>
  <li></li>
  <li></li>
  <li class="fourth"></li>
  <li class="first"></li>
  <li></li>
  <li></li>
  <li class="fourth"></li>
  <li class="first"></li>
  <li></li>
  <li></li>
  <li class="fourth"></li>
  <li class="first"></li>
  <li></li>
  <li></li>
  <li class="fourth"></li>
</ul>

Answer 1

试试这个:

$(function(){
     // You can use a more specific li selector as per your requirement
    $("li").each(function(a, b){
        if(a%4 == 0){
            $(b).addClass("first");
        }
        if(a%4 == 3){
            $(b).addClass("fourth");
        }
    });
});

编辑:

使用nth-child:

$(function(){
    var ul = $("ul");//You can use more specific UL
    ul.find(":nth-child(4n-3)").addClass("first");
    ul.find(":nth-child(4n)").addClass("fourth");
});

工作示例:http://jsfiddle.net/qmHNQ/