How to add a different class to the same class in

Question

I have no code to start off with, because I'm not advanced in JQuery and this seems like advanced stuff here. I know how to add classes, hide elements and other sorts of things but this is a new thing for me here. Here's the problem. I have content being served via php and mysql. The content will all share the same class and will be listed five per page. I need to have each of the same classes to have an extra class added to them to give it a unique class. An example of what the html looks like is below.

  <div id="1" class="example"></div>
  <div id="2" class="example"></div>
  <div id="3" class="example"></div>
  <div id="4" class="example"></div>
  <div id="5" class="example"></div>

I need Jquery to do this to the html:

  <div id="1" class="example ex1"></div>
  <div id="2" class="example ex2"></div>
  <div id="3" class="example ex3"></div>
  <div id="4" class="example ex4"></div>
  <div id="5" class="example ex5"></div>

It will not be practical to create scripts for the Id tag, because if I have a thousand Id's, then I will have to replicate the script a thousand times per id and more so as the list gets longer. This is only for javascript purposes so I want to keep it within javascript. If there is a way to accomplish this on the server side as well I'll take those suggestions as well. Thanks to all in advance for any help with this problem.

Answer 1

$(document).ready(function(){
    jQuery.each($(".example"), function(){
        $(this).addClass("x" + this.id);
    });
});​

Answer 2

If I read your comments correctly, you have 5 items per page and the class will be ex1 ex2 ... ex5 respectively.

If so, here is the script:

var itemsPerPage = 5;
$(".example").each(function(){       
    var number = this.id % itemsPerPage;
    if (number == 0) number = itemsPerPage;
    $(this).addClass("ex"+ number);
});

Or short version:

var itemsPerPage = 5;
$('.example').each(function(){
    $(this).addClass('ex'+ ((this.id % itemsPerPage) == 0 ? itemsPerPage : (this.id % itemsPerPage));
});

Or shortest version is EaterOfCorpses's answer if you don't care about the ID at all. Each method has its own pros and cons.

Example 1: Wrong ID order

<div id="6" class="example">
<div id="8" class="example">
<div id="7" class="example">

EaterOfCorpses's will generate

<div id="6" class="example ex0">
<div id="8" class="example ex1">
<div id="7" class="example ex2">

My script will generate

<div id="6" class="example ex1">
<div id="8" class="example ex3">
<div id="7" class="example ex2">

Example 2: random ID (EaterOfCorpses's pros)

<div id="15blahblah" class="example">
<div id="5" class="example">
<div id="10" class="example">

EaterOfCorpses's will generate

<div id="15blahblah" class="example ex0">
<div id="5" class="example ex1">
<div id="10" class="example ex2">

My script will generate same class and error at 15blahblah, which may be both good (to detect error in IDs) and bad (JS does not run for that particular record)

<div id="15blahlbah" class="example exNil">  
<div id="5" class="example ex5">
<div id="10" class="example ex5">

Cool.

Answer 3

Now I finnaly understand what you want

this code is needed

// Wait on the document to be loaded
$(function(){
    // get every element with the class example in an array and loop
    // through it(each) with i  as index
    $(".example").each(function(i){
        // add class ex with the index
        // this is the element we are pointing at so a div
        $(this).addClass("ex" + i);
    });
});​

but you could do this easily on server side when you loop through your array with 5 divs ;)