<div class="leaflet-marker-icon"></div> 
<div class="leaflet-marker-icon"></div> 
<div class="leaflet-marker-icon"></div> 
<div class="leaflet-marker-icon"></div> 

These are the divs generated by the map and it contains same class as leaflet-marker-icon. For each div I want to add an id Attribute with unique Ex (id=0, id=1, id=2, id=3);

My code is:

var length = $('.leaflet-marker-icon').length;
for (var x = 0; x < length; x++) {
    $('.leaflet-marker-icon').attr('id', x);
}

inside for loop it always takes the same id because $('.leaflet-marker-icon').attr('id', x) is a class. Could anybody please suggest how to add unique id to the class.

<div class="leaflet-marker-icon"></div> 
<div class="leaflet-marker-icon"></div> 
<div class="leaflet-marker-icon"></div> 
<div class="leaflet-marker-icon"></div> 

These are the divs generated by the map and it contains same class as leaflet-marker-icon. For each div I want to add an id Attribute with unique Ex (id=0, id=1, id=2, id=3);

My code is:

var length = $('.leaflet-marker-icon').length;
for (var x = 0; x < length; x++) {
    $('.leaflet-marker-icon').attr('id', x);
}

inside for loop it always takes the same id because $('.leaflet-marker-icon').attr('id', x) is a class. Could anybody please suggest how to add unique id to the class.

• javascript
• jquery
• css

• how are you adding divs, add id at the same time. – Bhushan Kawadkar Commented Feb 16, 2015 at 8:01

6 Answers 6

To continue your solution : ( I don't see why people try to show what they know and not correct you)

try this :

var _=$('.leaflet-marker-icon'); //let's cache the array
 var length = _.length; //let's cache the  length
    for(var x=0; x<length; x++) {
        _.eq(x).prop('id', x);
    }

sample : http://jsbin./vuzuhe/2/edit

Use :eq selector inside a for loop.

$('.leaflet-marker-icon:eq(' + x + ')').attr('id', x);

As your selector is class, so you should know that it returns a collection. So in your case you can just use this:

$('.leaflet-marker-icon').attr('id', function(i) {
  return i;
});

As you are using jquery and for setting a unique ids for your elements, you can use .attr('attribute', fn) for it.

$('.leaflet-marker-icon').attr('id', function(i) {
  return i;
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leaflet-marker-icon">leaflet-marker-icon1</div>
<div class="leaflet-marker-icon">leaflet-marker-icon2</div>
<div class="leaflet-marker-icon">leaflet-marker-icon3</div>
<div class="leaflet-marker-icon">leaflet-marker-icon4</div>

You can rather use .each() to iterate over element and use the element context(this) to set their attribute value:

$('.leaflet-marker-icon').each(function(i){
  this.id=i;
});

Working Demo

Create a variable and set it to zero. Using, each() function, add an id attribute equal to this variable and increase the variable by one in order to be assigned to the next element.

Inspect the div elements for results:

$(document).ready(function() {
  //var i = 0;
  $('.leaflet-marker-icon').each(function(i) {
    $(this).attr('id', i);
    //i++;
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leaflet-marker-icon">1</div> 
 <div class="leaflet-marker-icon">2</div> 
 <div class="leaflet-marker-icon">3</div> 
<div class="leaflet-marker-icon">4</div>

You should add id while adding divs dynamically, this will reduce the effort. But if you cannot do this, then try below code

var count = 1;
$('.leaflet-marker-icon').each(function(){
  $(this).attr('id',count);
  count++;
});

As suggested by Royi Namir, following is another way to achieve your solution

$('.leaflet-marker-icon').each(function(i,n){
      $(this).attr('id',i);
 });