jquery selectors problem

Question

I have an issue using jquerys selectors when it comes to a page I am populating from a database.

The database populates a which will display 4 <li> tags per row for x amount of rows.

I am trying to use addClass to give the first and last result on each row of the <ul> a different class.

I have tried :first and :last but these obviously only add the classes needed to the very first result and the very last result. I need the added to the first and last of each row of 4.

My current code is:

   $(document).ready(function(){
    $("ul#display li.thumbs:first").addClass("start");
    $("ul#display li.thumbs:last").addClass("end");
  });

Example HTML

    <ul>
    <li><a href="/images/">image 1</a></li>
    <li><a href="/images/">image 2</a></li>
    <li><a href="/images/">image 3</a></li>
    <li><a href="/images/">image 4</a></li>
    <li><a href="/images/">image 5</a></li>
    <li><a href="/images/">image 6</a></li>
    <li><a href="/images/">image 7</a></li>
    <li><a href="/images/">image 8</a></li>
    <li><a href="/images/">image 9</a></li>
    <li><a href="/images/">image 10</a></li>
    <li><a href="/images/">image 11</a></li>
    <li><a href="/images/">image 12</a></li>
    </ul>

Answer 1

http://docs.jquery.com/Selectors

This is some sample code from my test page under "click to see some jquery selectors":

    // JS THAT DO THE JOB FOR JQUERY SELECTORS
 $('#jquerySelectorsUl li:nth-child(7)').addClass('alert');
 $('#jquerySelectorsUl li a[title=test]').addClass('alert');
 // JS THAT DO THE JOB FOR LI ADD/REMOVE
 var i = $('#addRemove li').size();
 $('#add').click(function() {
  i++;
  $('<li>' + i + '</li>').appendTo('#addRemove');
 });
 $('#remove').click(function() {
  $('#addRemove li:last').remove();
  if (i != 0){
   i--;
  };
 });

Maybe this will help you even though its not really straight answer... :)

Answer 2

$(document).ready(function(){
    $("ul#display li.thumbs:first-child").addClass("start");
    $("ul#display li.thumbs:last-child").addClass("end");
});

first-child and last-child retrieve the list items if they are the first/last children of their immediate parent. So if there is a list item without class="thumbs" between the <ul> and the first <li class="thumbs">, then there will not be a match to the first selector.

Answer 3

See the accepted answer to this question, which basically involves using each() along with an index number i. Apply a modulus operator to see where each element falls in the set of four:

$(document).ready(function(){
    $("#display li.thumbs").each(function(i) { 
        if (i % 4 == 0) 
           $(this).addClass("start");
        if (i % 4 == 3) 
           $(this).addClass("end");
    });
});

Answer 4

You could use the nth-child selector:

$("ul li:nth-child(4n-3)").addClass("start");
$("ul li:nth-child(4n)").addClass("end");

Check a sample with your markup.

Answer 5

I like being able to change my mind about how many constitute a set in cases like this:

    var per_set = 4;
    $('ul li').each(function(index){
     if (index % per_set === 0) {
      $(this).addClass("start");
     } else if (index % per_set === (per_set-1)) {
      $(this).addClass("end");
     }
    });