Блог

У меня есть массив объектов (данных)

 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 . . . и т.д. . . .

Если я использую циклы, это выглядит уродливо и неуклюже, кто-нибудь может предложить лучший способ / правильный способ сделать это?

Вы можете использовать $.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 /

Просто используйте каждый метод jQuery:

 $('ul.swapme img.swapme').each(function(i) {
    $(this).attr('src', data[i].image);
});
  

Вам нужно было бы выполнить цикл, хотя я не думаю, что это все так уродливо:

 $.each(data,function(index){
    $("img.swapme").eq(index).attr("src",this.image);
});