Javascript 为什么是我的；至于；循环仅获取html中的最后一项

我已经读过了，但仍然无法理解，所以我发布代码寻求帮助

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);
};

功能产品（nom、prix）{
this.nom=nom；
this.prix=prix；
}
//_uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuujet____________________
var苹果=新产品（“苹果”，0.30）；
var香蕉=新产品（“香蕉”，0.03）；
var pear=新产品（“pear”，0.35）；
var kiwi=新产品（“kiwi”，0.40）；
var produit=[苹果、香蕉、梨、猕猴桃]；
对于（变量i=0；i

html

for

循环只获取html格式的最后一个项目名

“kiwi”

。
我用

console.log

和

alert

测试了循环，它们都得到了4个项目名称：“苹果”、“香蕉”、“梨”、“猕猴桃”

---

为什么这不显示在我的HTML中？

据我所知，您希望填充您的HTML以便

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

---

选择每个匹配实例。你不是在跳伞

据我所知，您希望填充html以便

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

---

选择每个匹配实例。你不是在跳伞

只需将for循环中的行更改为：

$（'.test'）.eq（i）.html（produit[i].nom）；

只需将for循环中的行更改为：

$（'.test'）.eq（i）.html（produit[i].nom）；

调用

$（“.test”）.html（）

时，将使用该类替换所有元素的内容。您需要使用

.eq（）

指定一个特定的

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

调用

$（“.test”）.html（）

时，将用该类替换所有元素的内容。您需要使用

.eq（）

指定一个特定的

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

---

问题是，在每次循环迭代中，您都要使用

test

类更改每个元素的内容。例如：

$（'.test'）.html（'replacement'）

1.
2.
3.
4
问题在于，在每次循环迭代中，您都在使用
测试
类更改每个元素的内容。例如：


$（'.test'）.html（'replacement'）

1.
2.
3.
4
问题在于该声明：

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

设置所有
的HTML。在循环的每次迭代中测试
元素，因此它们在
for
循环的每次迭代中都设置为
produit[i].nom
的值，因此它们都以循环的最后一次迭代的值结束。您没有迭代
.test
元素来一次设置一个


有许多不同的方法可以做到这一点，但我将推荐一种替代方法，用于迭代您的集合，然后为每个元素分配正确的HTML：

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

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

这也比其他一些方法更有效，因为它只计算选择器
$（“.test”）
一次，然后迭代该元素列表，而不是每次通过循环重新计算选择器


jQuery有很多技巧。事实证明，还可以使用回调函数，该函数将针对集合中的每个元素分别调用。因此，您也可以这样做：

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

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

问题在于，这一声明：

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

设置所有
的HTML。在循环的每次迭代中测试
元素，因此它们在
for
循环的每次迭代中都设置为
produit[i].nom
的值，因此它们都以循环的最后一次迭代的值结束。您没有迭代
.test
元素来一次设置一个


有许多不同的方法可以做到这一点，但我将推荐一种替代方法，用于迭代您的集合，然后为每个元素分配正确的HTML：

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

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

这也比其他一些方法更有效，因为它只计算选择器
$（“.test”）
一次，然后迭代该元素列表，而不是每次通过循环重新计算选择器


jQuery有很多技巧。事实证明，还可以使用回调函数，该函数将针对集合中的每个元素分别调用。因此，您也可以这样做：

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

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

循环每次都将相同的值写入所有匹配的
。test
。您的所有迭代都将覆盖上一次迭代的文本。div都是相同的目标，因为它们具有相同的类。因此，循环将把每个值写入同一个点（在您的例子中，所有4个div）。您必须给任何div一个ID，或者必须根据它们在DOM中的位置调用div。您的循环每次都将相同的值写入所有匹配
。test
。您的所有迭代都将覆盖上一次迭代的文本。div都是相同的目标，因为它们具有相同的类。因此，循环将把每个值写入同一个点（在您的例子中，所有4个div）。你必须给任何div一个ID，或者你必须根据它们在DOM中的位置调用div。那么，解决方案是什么？那么，解决方案是什么？它工作得很好！我认为其他答案也可以，但你的答案简单而快速，非常感谢！它工作得很好！我认为其他答案也可以，但你的答案简单而快速，非常感谢！很有效，太好了！我以前看过“情商”，但从来没有想过把“我”放在里面可以做到这一点。它的工作，伟大！我以前看过“情商”，但从来没有想过把“我”放在里面可以做到这一点。看起来不错，但我接受了另一个答案，仍然感谢你的帮助！看起来不错，但我接受了另一个答案，仍然感谢你的帮助！