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个项目名称：＆＃34; apple＆＃34;，＆＃34; banana＆＃34;，＆＃34; pear＆＃34 ;，＆＃34;猕猴桃＆＃34;

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

Answer 1

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

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

Answer 2

当您致电$(".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 3

问题是您在每次循环迭代时都使用test类更改每个元素的内容。例如：

＆＃13;
＆＃13;
$('.test').html('Replaced');
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如果要在每次循环迭代时更改 nth .test元素，可以使用.eq。

＆＃13;
＆＃13;
var list = ['a', 'b', 'c', 'd']; var $test = $('.test'); for (var i = 0; i < list.length; i++) { $test.eq(i).html(list[i]); }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 4

根据我的理解，您希望填充您的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 5

问题是这句话：

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

在循环的每次迭代中为所有.test元素设置HTML，因此在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;
});

为什么我的＆＃34;为＆＃34;循环只获取html中的最后一项

5 个答案: