Question

I have a structure like this

        <div class="dynamic" id="thumbnail-div">
            <p id="thumbnail-p">
                <a href="#">
                    <img src="images/circle.GIF" alt="Example Number 1 For Display Case" name="Example Number 1 For Display Case" class="dynamic" id="thumbnail-img" />
                </a>
            </p>
        </div>

There are multiples of that html structure above so there could be like 10, 20, 50, etc. Now what I am trying to do is have jQuery change the classes to all the elements with the id of “thumbnail-div” to something like thumb1, thumb2, thumb3, etc.. so they should count up depending on how many there are. I cannot find a way to achieve this and after a lot of research I have found nothing helpful. Please help.

Thanks in advance!

Answer 1

You seem to having duplicated ID’s on your page ..

I am afraid if you try to access these elements with ID it will only retrieve the first element with that ID..

Lets say all your div’s in Question has the .dynamic class.. Then you can do something like this

$('div.dynamic').each(function(i){

     $(this).addClass('thumb' + (i+1));   // Add Class
     $(this).attr('id' , 'thumb' + (i+1));  // Set id for each div 
});

Check FIDDLE