How to add a different class to the same class in JQuery? - jquery-selectors

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

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 ;)

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

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