Question

我有一个对象数组（数据）

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属性的正确方法是什么。即，a.jpg成为image1.jpg。。。等。。。

如果我使用循环，它看起来很丑陋，任何人都可以提供更好的方法/正确的方法吗？

Answer 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')，因为图片代码不是无序列表代码的直接后代。

以下是此解决方案的一个方面：http://jsfiddle.net/jasper/Bycse/

Answer 2

只需使用jQuery's each method：

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

Answer 3

你需要循环，但我认为这不是那么难看：

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

更改标签属性的数组

3 个答案: