How to set id to an element in jquery?

Just add id to img tag

$('.d').append('<img src="" id="'+i+'" class="UP__" width="120" height="120">');

First declare your variables (whether using var or let) in order to avoid created global variables, and then you can either add the id within the loop:

for(let i=0; i<10; i++){ $('.d').append('<img src="" id="' + i + '" class="UP__" width="120" height="120">'); } 

Or do so outside of the loop:

for(let i=0;i<10;i++){ $('.d').append('<img src="" class="UP__" width="120" height="120">'); } // here we select all the matching <img> elements, and update // 'id' property using the prop() method, and the anonymous // function: $('.d img').prop('id', function (index){ // 'index' is the index of the current element in // the jQuery collection over which prop() iterates: return index; }); 

The problem with your posted approach was that you were selecting all the matching elements (in each iteration of the loop) and setting the id of all those elements to the same number. This is avoided by both approaches shown above.

Note that using a numeric character as the first character of an id does complicate the CSS selectors used to target those ids as you first need to escape the number character.

With that in mind, to select the element with id="1" you'd need to use:

#\31 { /* css */ } 

You don't need to give an ID. Just use each function of jQuery.

I added the images manually, but you can make it of course dynamic using your own code.

<div class="d"> <img src="http://afterishtar.pl/images/100x100.gif"> <img src="http://afterishtar.pl/images/100x100.gif"> <img src="http://afterishtar.pl/images/100x100.gif"> <img src="http://afterishtar.pl/images/100x100.gif"> <img src="http://afterishtar.pl/images/100x100.gif"> </div> 

Then this.

$(document).ready(function() { $(".d img").each(function( index ) { console.log(index); }); }); 

Its because you are adding the id to all img tags inside the .d div.

PS: Always have the image src tag properly set. An empty src for image tag creates a lot of problems than it solves. if src is not known or set later, use about_blank.

Also, its always a good recommendation to change the dom as minimal times as possible. When possible, append newly created elements once all the manipulations are complete and before attaching them to DOM.

$(function() { for (i = 0; i < 10; i++) { var $img = $('<img src="about_blank" class="UP__" width="120" height="120">'); $img.attr("id", i).attr("title", i); $('.d').append($img); } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="d"></div>