为生成的图像提供 ID/类答案

【问题标题】：Give ID/Class to generated images为生成的图像提供 ID/类
【发布时间】：2011-03-14 15:42:14
【问题描述】：

我有 10 张左右的图片来自 flickr。目前它们只是作为没有个人 ID 或类名的图像出现。

所以我有：

<img src="images/01.jpg" width="300" height="273" />
<img src="images/01.jpg" width="300" height="273" />
<img src="images/01.jpg" width="300" height="273" />
<img src="images/01.jpg" width="300" height="273" />

...等等。我想做的是：

<img id="image1" src="images/01.jpg" width="300" height="273" />
<img id="image2" src="images/01.jpg" width="300" height="273" />
<img id="image3" src="images/01.jpg" width="300" height="273" />
<img id="image4" src="images/01.jpg" width="300" height="273" />

但是因为它们是通过 jQuery 而不是手动引入的，所以我不确定如何将这些 ID 按顺序添加到图像中。每个都需要不同的样式。

有什么想法吗？

【问题讨论】：

欢迎来到SO，请不要忘记访问stackoverflow.com/faq并接受正确答案.. :)

标签： javascript jquery image append add

【解决方案1】：

使用 ajax 的回调函数...

如果你有这样的东西，

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function (data) {
    $.each(data.items, function (i, item) {
        $("<img/>").attr({"src":item.media.m, 'id': 'images' + i}).appendTo("#images");
    });
});

【讨论】：

【解决方案2】：

你可以使用：

jqueryEl.attr("id", "someId");

或：

jqueryEl.addClass("newClass")

其中jQueryEl 是一个包装元素。或者，如果您有一组图像，您可能会发现 attr 的功能选项很有帮助：

jquerySet.attr("id", function(index)
                     {
                       return "image" + (index + 1);
                     });

这实际上类似于attr docs 中的示例。

【讨论】：

+1 很好地使用attr 和回调！您的参数名称有点误导，因为它是 index 而不是 id，但仍然是很好的答案！

【解决方案3】：

如果您想发布获取图像的代码，它可能会更好地集成在那里。但是，您也可以在添加图像后添加此代码。让我们假设图像被添加到 id 为 flickr 的 div 中：

$("#flickr img").each(function (i, image){
  image.id = "image" + (i + 1);
});

就是这样！现在每张图片都会有image1、image2等依次为id。

【讨论】：