CODEWITHSUNDEEP
javascriptjqueryhtml
V.David
V.David

Reputation: 75

AddID with jQuery on a dynamic div

I'm trying to add an id to each div that it generates something like this.

<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>

How can I add an id to each of them dynamically?

This is my code

var sizestring= $('.wpmlposts').length; 
for (i=0;i <sizestring;i++){
}

I know its incomplete, but I have no idea how can I add an id to each div!

Upvotes: 1

Views: 426

Answers (5)

Quentin Fonck
Quentin Fonck

Reputation: 1315

You need to use the each function to treat every node individually. each function

$('.wpmlposts').each(function(index) {$(this).attr('id', index);
});

Upvotes: 1

user6783030
user6783030

Reputation:

you can also do it like this

$('.wpmlposts').each(function(i){
    $(this).attr('id','randId'+i);
});

// displaying here

$('.wpmlposts').each(function(i){
    console.log(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

To add an id is easy, assuming that those elements are present in the DOM already:

$('.wpmlposts').prop('id', function(i){
    return 'idPrefix' + i;
});


$('.wpmlposts').prop('id', function (i){
  return 'idPrefix' + i;
});
div::before {
  content: attr(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>

Incidentally, you really don't need JavaScript for this, the following would work just as well (in relatively up-to-date browsers):

Array.from(document.querySelectorAll('.wpmlposts')).forEach((el,index) => el.id = 'idPrefix' + i);


Array.from(document.querySelectorAll('.wpmlposts')).forEach((el,index) => el.id = 'idPrefix' + index);
div::before {
  content: attr(id);
}
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>

References:

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115222

You can use attr() or prop() method with a callback function which iterates the elements internally and generates the id value using first arguments in the callback which is the index of the element in the collection.

$('.wpmlposts').attr('id', function(i) {
  return 'ranId' + i;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>

Upvotes: 3

Mahi
Mahi

Reputation: 1727

var _=$('.wpmlposts'); //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);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>

Upvotes: 0

Related Questions