jQuery遍历数组向容器行添加元素时内容重复如何解决

代码的核心问题出在循环内追加子元素的选择器逻辑：

• 每次循环中你使用$(".row")选择器匹配元素，这个选择器会选中当前页面上所有class包含row的元素，并非当前循环刚创建的那一行。
• 循环执行过程中，随着创建的row越来越多，每次追加元素时都会把当前循环生成的时间文本、输入框、按钮，追加到之前所有已经创建的行里，最终就会出现行内容重复堆叠、越靠前的行冗余元素越多的问题。
• 额外小问题：for循环的计数变量i没有做变量声明，会污染全局作用域。

不需要通过全局类选择器找行，直接把元素追加到当前循环中创建好、存在eachRow变量里的行对象即可，同时给循环计数变量加上声明。
修正后可正常运行的代码如下：

// 时间区间数组
var timeArr = [
  "9 am",
  "10 am",
  "11 am",
  "12 pm",
  "1 pm",
  "2 pm",
  "3 pm",
  "4 pm",
  "5 pm",
];

// 遍历数组生成每行的时间、输入框、锁定按钮
for (let i = 0; i < timeArr.length; i++) {
  var eachRow = $("<div>").addClass("row");
  $(".container").append(eachRow);
  var eachHour = $("<textarea>").text(timeArr[i]).addClass("hour col-md-2");
  var userInput = $("<input>")
    .attr("placeholder", "Add your notes here..")
    .addClass("time-block col-md-8");
  var textLock = $("<button>").text("lock/unlock").addClass("saveBtn col-md-2");
  // 直接向当前创建的行对象追加子元素
  eachRow.append(eachHour);
  eachRow.append(userInput);
  eachRow.append(textLock);
}

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