改變的代碼陣列屬性

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')作爲圖像標籤不無序列表標記的直接後裔。

下面是該解決方案的的jsfiddle：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); 
});