Set ID attribute via Jquery

Question

I try to set id for image elements in a div.

<div id = 'div_content'>
   <img src ='img1.png'>
   <img src ='img2.png'>
</div>

And script:

var items = document.querySelectorAll('#div_content img');
for (var i = 0, l = items.length; i < l; i++) {
   items[i].attr("id","id"+i);
};

But it's wrong.

Answer 1

 $('#div_content img').each(function (index) { $(this).attr("id","id" + index); }); alert($("#div_content").html()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id = 'div_content'> <img src ='img1.png'> <img src ='img2.png'> </div> 

Do not use querySelectorAll since you already use jQuery.

$('#div_content img').each(function (index) {
   $(this).attr("id","id" + index);
});

document.querySelectorAll will return an array of DOMElement s that don't have attr method.

Answer 2

Don't bother using jQuery, just set the property directly. The code's shorter and it's more efficient, too!:

items[i].id = 'id' + i;

---

NB: items[i] is just a DOM element, you would have had to write $(items[i]) to turn it into a jQuery object with a .attr method.