Дайте ID/Class сгенерированным изображениям

Question

У меня есть примерно 10 изображений от flickr. В настоящий момент они просто появляются как изображения без отдельных идентификаторов или имен классов.

Так у меня есть:

<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, а не вручную, я не уверен, как добавить эти идентификаторы, чтобы, к изображениям. Каждый из них должен быть оформлен по-разному.

Любые идеи?

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 «s полезно:

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

Это на самом деле похож на пример в attr docs.

Answer 3

Если вы хотите разместить код, который извлекает изображения, он, вероятно, может быть лучше интегрированы там. Однако вы можете просто добавить этот код после добавления изображений. Позволяет делать вид изображения добавляются в DIV с идентификатором flickr:

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

Thats это! Теперь каждое изображение будет иметь image1, image2 и т. Д. Как id, на заказ.