求助：如何将数组元素按索引对应追加到同class的HTML Div中

嘿，我来帮你搞定这个小问题～ 先看看你代码里的问题出在哪：

你外层循环数组的时候，内层又用$('.appendDiv').each遍历了所有目标div，而且最关键的是——你用$('.appendDiv').append()的时候，是选中了所有带有appendDiv类的元素，不管当前的index是否匹配。这就导致每次循环都会给所有div追加内容，最后每个div都被加了两次名字，才出现了错误的结果。

正确的解决方案有两种，挑你喜欢的来用： #

方法一：通过索引直接定位对应Div（用eq()）

先获取所有目标div的集合，然后循环数组时，用索引直接拿到对应位置的div进行追加：

var values = [
  { 'name': "john" },
  { 'name': "doe" }
]
// 先缓存所有目标div，避免重复DOM查询
var targetDivs = $('.appendDiv');

for (var i = 0; i < values.length; i++) {
  // 先判断索引是否在div集合的范围内，避免数组长度比div多的情况
  if (i < targetDivs.length) {
    var name = values[i].name;
    // 用eq(i)精准获取对应索引的div，再追加内容
    targetDivs.eq(i).append('<p>' + name + '</p>');
  }
}

方法二：遍历Div集合，对应数组索引取值

反过来，直接遍历div集合，用每个div的索引去数组里取对应的值：

var values = [
  { 'name': "john" },
  { 'name': "doe" }
]

$('.appendDiv').each(function(index) {
  // 拿到当前索引对应的数组元素，先判断是否存在（防止数组长度比div少）
  var currentValue = values[index];
  if (currentValue) {
    // $(this)就是当前遍历到的div，直接追加内容
    $(this).append('<p>' + currentValue.name + '</p>');
  }
});

为什么原来的代码会出错？ #

举个例子：

• 当外层循环i=0时，内层each遍历到第一个div（index=0），你执行了$('.appendDiv').append()——这会给所有appendDiv类的div都追加john；
• 当外层循环i=1时，内层each遍历到第二个div（index=1），你又执行了$('.appendDiv').append()——这会给所有div再追加doe；
• 最终每个div都有了两个名字，就出现了你看到的错误结果。

用上面两种方法修改后，就能实现数组[0]对应Div[0]、数组[1]对应Div[1]的效果，得到你期望的正确输出啦～

内容的提问来源于stack exchange，提问作者user13460509