CODEWITHSUNDEEP
javascriptjquerycss
prudvi raju
prudvi raju

Reputation: 505

Add div id dynamically using jquery to the class element

<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.

Upvotes: 1

Views: 5731

Answers (6)

Jai
Jai

Reputation: 74738

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.com/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>

Upvotes: 1

Royi Namir
Royi Namir

Reputation: 148524

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.com/vuzuhe/2/edit

Upvotes: 4

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

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.com/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>

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

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

Upvotes: 0

pavel
pavel

Reputation: 27082

Use :eq selector inside a for loop.

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

Upvotes: 1

Related Questions