Question

我正在尝试使用$.each()迭代一些div更改文本。文本在一个数组中，我想要做的是为包含在父级中的每个div更改它。

在我现在的代码中，它只打印最后一个数组条目。

这是代码：

parent=$(".parent");
array = ['one','two','three','four','five','six'];

$.each( array, function( i, val ) {
  $( ".parent div" ).text(val);
});

这是一个可以更好地解释我的问题的例子：

http://codepen.io/anon/pen/XbGXeL?editors=101

感谢您的帮助。

Answer 1

请参阅http://codepen.io/anon/pen/XbGXzv?editors=101

$.each( array, function( i, val ) {
  $( ".parent div" ).eq(i).text(val);
});

您可以使用eq使用索引选择元素。假设数组长度与div计数匹配。

Answer 2

试试这个：

parent = $(".parent");
array = ['one', 'two', 'three', 'four', 'five', 'six'];

$.each(array, function (i, val) {
    console.log(i, val)
    $(".parent div:eq(" + i + ")").text(val);
});

演示：http://codepen.io/anon/pen/LVaGeN?editors=101

关于eq：使用jquery选择器时，它返回一个与css选择器匹配的元素数组。因此，为了访问数组中的特定元素，您需要使用索引。而eq或get就是这样做的。

Answer 3

jQuery text()方法接受函数作为参数，使用它：

$( ".parent div" ).text(function(i){
  return array[i];
});

Answer 4

您使用的选择器，即$(".parent div")适用于div .parent的孩子的任何div。

这意味着在每次迭代时，.each()方法首先查找您指定的过滤器（即任何子div）并将文本插入div（在本例中为所有div）。最后，您将剩下最后一个array值插入到所有div中。

尝试其他答案中指定的方法，或者这样：

parent=$(".parent");
array = ['one','two','three','four','five','six'];

$.each( parent.children('div'), function( i, div ) {
  $( div ).text(array[i]);
});

Working Sample Here

如何使用jquery.each（）从数组设置div值

4 个答案: