Give ID/Class to generated images

问题:

I have 10 or so images coming in from flickr. At the moment they just come in as images with no individual ID or Class names.

So I have:

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

...and so on. What I want to do is have:

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

But because they are being brought in via jQuery, and not manually, I'm unsure how to add these ID's, in order, to the images. Each needs to be styled differently.

Any ideas?

回答1:

use the callback function of your ajax...

if you have something like this,

$.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:

You can use:

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

or:

jqueryEl.addClass("newClass")

where jQueryEl is a wrapped element. Or, if you have a set of images, you might find attr's function option helpful:

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

This is actually similar to an example in the attr docs.

回答3:

If you want to post the code that fetches the images, it probably could be better integrated there. However, you could also just add this code after the images have been added. Lets pretend the images are added to a div with the id of flickr:

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

Thats it! Now each image will have image1, image2, etc as the id, in order.