#javascript #jquery
#javascript #jquery
Вопрос:
У меня есть массив объектов (данных)
data[0].image = image1.jpg;
data[0].name = "some name";
data[1].image = image2.jpg;
data[1].name = "some name";
data[2].image = image3.jpg;
data[2].name = "some name";
data[3].image = image4.jpg;
data[3].name = "some name";
У меня также есть группа тегов, вложенных в ul.
<ul class='swapme'>
<li><img class="swapme" src="a.jpg" /></li>
<li><img class="swapme" src="b.jpg" /></li>
<li><img class="swapme" src="c.jpg" /></li>
<li><img class="swapme" src="d.jpg" /></li>
</ul>
Я знаю, что могу захватить теги img с
$('ul.swapme').children('img.swapme')
Я знаю, что могу поменять местами каждый атрибут src изображений с
$('img.swapme').attr('src', data[0].image)
Мой вопрос в том, как правильно заменить атрибут src соответствующим объектом данных. ie, a.jpg становится image1.jpg . . . и т.д. . . .
Если я использую циклы, это выглядит уродливо и неуклюже, кто-нибудь может предложить лучший способ / правильный способ сделать это?
Ответ №1:
Вы можете использовать $.each()
цикл и использовать index
:
var data = [
{'image':'image1.jpg', 'name':'some name'},
{'image':'image2.jpg', 'name':'some name'},
{'image':'image3.jpg', 'name':'some name'},
{'image':'image4.jpg', 'name':'some name'},
];
$('ul.swapme').find('img.swapme').each(function (index, value) {
$(value).attr('src', data[index].image);
});
Обратите внимание, что я изменил $('ul.swapme').children('img.swapme')
на $('ul.swapme').find('img.swapme')
, поскольку теги изображений не являются прямыми потомками тега неупорядоченного списка.
Вот jsfiddle этого решения:http://jsfiddle.net/jasper/Bycse /
Ответ №2:
Просто используйте каждый метод jQuery:
$('ul.swapme img.swapme').each(function(i) {
$(this).attr('src', data[i].image);
});
Ответ №3:
Вам нужно было бы выполнить цикл, хотя я не думаю, что это все так уродливо:
$.each(data,function(index){
$("img.swapme").eq(index).attr("src",this.image);
});
Комментарии:
1. Достаточно справедливо. Зацикливание другим способом было бы более эффективным.