I'm trying to make jquery parse list of div blocks and add id to each div one by one with numbers like 1,2,3,4,5 and so.

For example, here is the list of div blocks:

<div class="my-blocks">
   <div class="start"></div>
   <div class="start"></div>
   <div class="start"></div>
   <div class="start"></div>
</div>

There can be any amount of div blocks with class "start". Final result must be like this:

<div class="my-blocks">
   <div id="1" class="start"></div>
   <div id="2" class="start"></div>
   <div id="3" class="start"></div>
   <div id="4" class="start"></div>
</div>

How can I do that? I just don't really understand where I can start to reach this functionality.

I'm trying to make jquery parse list of div blocks and add id to each div one by one with numbers like 1,2,3,4,5 and so.

For example, here is the list of div blocks:

<div class="my-blocks">
   <div class="start"></div>
   <div class="start"></div>
   <div class="start"></div>
   <div class="start"></div>
</div>

There can be any amount of div blocks with class "start". Final result must be like this:

<div class="my-blocks">
   <div id="1" class="start"></div>
   <div id="2" class="start"></div>
   <div id="3" class="start"></div>
   <div id="4" class="start"></div>
</div>

How can I do that? I just don't really understand where I can start to reach this functionality.

• javascript
• jquery

• 1 Is there a specific reason you need to add id attributes on the fly? Using the index of the element within the parent is usually quicker and more convenient. – Rory McCrossan Commented Apr 7, 2014 at 9:55
• 3 Numeric id attributes are technically not supported until HTML5, and even then CSS3 still does not support them. Adding a text prefix would be more robust. – Frédéric Hamidi Commented Apr 7, 2014 at 9:55

6 Answers 6

You can use .each() to iterate over child divs and then use index+1 to set it as id value.try this:

 $('.my-blocks div').each(function(){
   $(this).attr('id',$(this).index()+1);
 });

Working Demo

You can do:

$('.my-blocks .start').each(function(i) {
    $(this).attr('id', i+1);    
});

Also note that number is not valid id, you can use div-1, div-2... instead.

Fiddle Demo

You need to add an alphabetical prefix for the ids, Since setting an id as a numeric value is not acceptable in standards below html5. so that your code would achieve backward patibility.

Try to use the receiver function of .attr(),

$('.my-blocks .start').attr('id', function(i,_) {
   return 'id-' + (i+1);
});

DEMO

You must take care that id starting with number is not allowed until html 4. So if you not working on html5 then you should add some prefix to id.

try each():

$('div.start').each(function(index, element){
  $(this).attr('id',index+1);
});

Here is working demo.

Using jQuery 'id' property, loop through each block:

$(function(){
    $.each($('.start'), function(i,e){
        e.id = i+1;
    });
});

JSFiddle here http://jsfiddle/PU2T4/

And one more (DEMO):

$('.start').attr('id', function() { return $(this).index()+1; });