Question

I have a list of 16 items. There are 4 rows with 4 items on each row.
How can I add a class ‘.first’ to the first item of each row and ‘.fourth’ to the fourth item of each row.

Resulting:

<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

Try this:

$(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");
        }
    });
});

EDIT:

Using 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");
});

Working example: http://jsfiddle.net/qmHNQ/