如何使用jquery动态地为div中的每个图像设置不同的id答案

【问题标题】：how to different id to each image in a div dynamically with jquery如何使用jquery动态地为div中的每个图像设置不同的id
【发布时间】：2016-06-18 14:34:43
【问题描述】：

我在一个 div 中有四个图像，并使用 jQuery 在循环中动态地将 src 添加到每个图像，如下所示：

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

图片标签会这样：

    <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"/>

现在我想为每个图像动态添加不同的 id，因此标签如下：

    <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"/>

【问题讨论】：

Id 应该是唯一的。
stackoverflow.com/questions/2176986/… 的可能副本以及在 SO 上找到的许多其他答案。
比“如何”动态地为图像分配唯一的ids 更重要的是，为什么您要为这些图像分配id？这是为了解决什么问题？

标签： jquery image src

【解决方案1】：

这样试试，

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

但是，您需要将此图像附加到文档正文中，以便下次调用此代码时获得新的 id。

可以，

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

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 = ''; }

其中 'target_div' 是包含 img 标签的 div。确保包含有效 html 的 'alt' 属性。

【讨论】：

【解决方案3】：

您可以使用 jQuery 使用这样的循环动态添加每个图像 src 和唯一 ID：

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

【讨论】：