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 docs中的示例。

Answer 3

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

的div中

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

多数民众赞成！现在，每张图片都会按顺序image1，image2等id。

为生成的图像提供ID / Class

3 个答案: