为什么我的“for”循环只得到HTML中的最后一项

Question

我已经读过JavaScript closure inside loops – simple practical example和Why am I only getting the last item from javascript for loop?但仍然想不通，所以我后我的代码，以寻求帮助

function Produit(nom, prix){ 
    this.nom = nom; 
    this.prix = prix; 
} 

// ______________ Objet ____________________ 

var apple = new Produit("apple", 0.30); 
var banana = new Produit("banana", 0.03); 
var pear = new Produit("pear", 0.35); 
var kiwi = new Produit("kiwi", 0.40); 

var produit = [apple,banana,pear,kiwi]; 


for (var i = 0; i < produit.length; i++) { 
    $('.test').html(produit[i].nom); 
}; 

HTML

<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 

for循环仅在html中获取最后一个项目名称"kiwi"。
我测试循环与console.log和alert，他们都获得了4项名称：“苹果”，“香蕉”，“梨”，“猕猴桃”

为什么不这样出现在我的HTML？

Answer 1

的问题是你改变的每一个元素的内容与每个循环迭代test类。例如：

$('.test').html('Replaced');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test">1</div> 
 
<div class="test">2</div> 
 
<div class="test">3</div> 
 
<div class="test">4</div>

如果你想改变每次循环的第n个.test元素，你可以使用.eq。

var list = ['a', 'b', 'c', 'd']; 
 
var $test = $('.test'); 
 
for (var i = 0; i < list.length; i++) { 
 
    $test.eq(i).html(list[i]); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test">1</div> 
 
<div class="test">2</div> 
 
<div class="test">3</div> 
 
<div class="test">4</div>

Answer 2

从我个人理解，你想填充你的HTML，让你得到

<div class="test">apple</div> 
<div class="test">banana</div> 
<div class="test">pear</div> 
<div class="test">kiwi</div> 

而是你得到

<div class="test">kiwi</div> 
<div class="test">kiwi</div> 
<div class="test">kiwi</div> 
<div class="test">kiwi</div> 

是正确的吗？

如果是这样，那是因为

$('.test').html() 

选择所有匹配的实例。你没有在div上循环。

Answer 3

简单地改变行的for循环这样的：

$('.test').eq(i).html(produit[i].nom); 

Answer 4

当你调用$(".test").html()要替换的所有与该类元素的内容。您需要使用.eq()来指定特定的一个。

for (var i = 0; i < produit.length; i++) { 
    $('.test').eq(i).html(produit[i].nom); 
}; 

另一种方式来做到这将是一个函数传递给.html()。它接收元素的索引，可以用它来索引produit阵列：

$('.test').html(function(i) { 
    return produit[i].nom; 
}); 

Answer 5

的问题是，这样的说法：

$('.test').html(produit[i].nom); 

设置HTML对你的循环的每个迭代ALL .test元素，因此它们都设置为价值produit[i].nom在您的for循环的每一次迭代中，因此它们都会以循环的最后一次迭代结束。您并未遍历.test元素来逐个设置它们。

---

有许多不同的方法可以做到这一点，但我会建议使用jQuery's .each()遍历的集合，然后到合适的HTML分配给每个元素的替代方法：

var produit = [apple,banana,pear,kiwi]; 

$(".test").each(function(index, element) { 
    $(element).html(produit[index].nom); 
}); 

这也更有效一些其他方法，因为它只评估选择器$(".test")一次，然后迭代该元素列表，而不是每次通过循环重新评估选择器。

---

jQuery有很多窍门。事实证明，.html() method也可以采用回调函数，该函数将为集合中的每个元素单独调用。因此，您也可以这样做：

var produit = [apple,banana,pear,kiwi]; 

$(".test").html(function(index) { 
    return produit[index].nom; 
});