在动态div上使用jQuery的AddID

Question

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!

Answer 1

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> 

Answer 2

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:

• prop() .

Answer 3

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> 

Answer 4

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

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

Answer 5

 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>