how to different id to each image in a div dynamically with jquery

Question

I have four images in a div like and adding the src to each image dynamically with jQuery in a loop as follows:

      jQuery("<img>",{src: BASE_URL+image_url)

do the image tag will like this:

    <img src="site_url/media/catalog/size_images/1.png"/>
    <img src="site_url/media/catalog/size_images/2.png"/>
    <img src="site_url/media/catalog/size_images/3.png"/>
    <img src="site_url/media/catalog/size_images/4.png"/>

now i want to add a different id to each image dynamically so the tag will be as follows:

    <img id="1" src="site_url/media/catalog/size_images/1.png"/>
    <img id="2" src="site_url/media/catalog/size_images/1.png"/>
    <img id="3" src="site_url/media/catalog/size_images/1.png"/>
    <img id="4" src="site_url/media/catalog/size_images/1.png"/>

Possible duplicate of http://stackoverflow.com/questions/2176986/jquery-add-id-instead-of-class and a host of other answers found on SO. — Rob, Mar 04 '16 at 18:22
More importantly than "*how*" to dynamically assign unique `id`s to images, *why* are you assigning these images an `id`? What problem is this meant to solve? — David Thomas, Mar 04 '16 at 18:23

score 0 · Answer 1 · answered Mar 04 '16 at 18:20

Try like this,

$("<img>",{src: BASE_URL+image_url, id: $('img').length});

However, you will need to append this image to document body, so that you get new id next time you call this code.

It can be,

$("<img>",{src: BASE_URL+image_url, id: $('img').length}).appendTo('#target');

Hope this help.

score 0 · Answer 2 · answered Mar 04 '16 at 18:38

for (x=0;x<$(target_div).children('img').length;x++){ var thisImg = $(target_div).children('img')[x]; thisImg.id = x; thisImg.src = BASE_URL+image_url; thisImg.alt = ''; }

Where 'target_div' is the div containing the img tags. Be sure to include the 'alt' attribute for valid html.

score 0 · Answer 3 · answered Sep 23 '20 at 05:47

0

you can add each image src and unique id dynamically with jQuery using for a loop like this:

   for (var i = 0; i < 4; i++) {
       $('div').append($('<img>',{id: "id" + i, src: BASE_URL+image_url}));
   }

answered Sep 23 '20 at 05:47

shweta ramani

382
4
6

how to different id to each image in a div dynamically with jquery

3 Answers3