javascript - 为什么我的 "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 个项目名称:“apple”、“banana”、“pear”、“kiwi”

为什么这没有显示在我的 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>

如果您想在每次循环迭代时更改第 nth .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>