Donnez une ID/classe aux images générées

Question

J'ai une dizaine d'images provenant de flickr. Pour le moment, ils viennent juste en images sans identifiant individuel ni nom de classe.

J'ai donc:

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

... et ainsi de suite. Ce que je veux faire est d'avoir:

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

Mais parce qu'ils sont amenés via jQuery, et non manuellement, je ne suis pas sûr comment ajouter ces années ID, dans l'ordre, aux images. Chacun doit être stylisé différemment.

Des idées?

Answer 1

utiliser la fonction de rappel de votre ajax ...

si vous avez quelque chose comme ça,

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

Vous pouvez utiliser:

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

ou:

jqueryEl.addClass("newClass") 

où jQueryEl est un élément enroulé. Ou, si vous avez un ensemble d'images, vous trouverez peut-être l'option la fonction de attr utile:

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

Ceci est en fait similaire à un exemple dans le attr docs.

Answer 3

Si vous souhaitez publier le code qui va chercher les images, il pourrait sans doute être mieux intégrée Là. Cependant, vous pouvez également ajouter ce code après que les images ont été ajoutées. Les images semblant Lets sont ajoutées à un div avec l'id de flickr:

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

Thats it! Maintenant, chaque image aura image1, image2, etc id, dans l'ordre.