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

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()方法首先查找您指定的过滤器（即ANY子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]);
});

这里的工作样本