为生成的图像提供 ID/类

Question

我有大约 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 添加到图像中。每个人都需要有不同的风格。

有什么想法吗？

Answer 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");
    });
});

Answer 2

您可以使用：

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

或：

jqueryEl.addClass("newClass")

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

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

这实际上类似于 attr 文档。

Answer 3

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

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

就是这样！现在，每个图像将按顺序具有 image1、image2 等作为 id。