使用jQuery克隆HTML类元素出现无限重复，如何按数组长度控制克隆次数

你的代码出现克隆元素数量不受控、视觉上呈现无限生成的效果，核心逻辑错误有两点：

• 未固定克隆模板引用：循环内每次执行$("section")，jQuery都会实时查询当前DOM中所有匹配section标签的节点，对集合内每一个节点执行克隆、追加操作。由于前几轮循环追加的克隆节点本身就存在于DOM中，会被后续循环的选择器识别纳入克隆范围，导致每一轮需要克隆的节点数量是上一轮的2倍。按usTime长度循环9次计算，最终生成的克隆节点总数可达511个，和你预期的按数组长度生成9个节点的目标完全偏离。
• 循环逻辑与数组内容脱节：你以usTime.length作为循环终止条件，但循环体内没有读取usTime、militaryTime数组的任何值，数组仅起到限定循环次数的作用，没有参与到克隆元素的内容、属性设置环节。

• 循环开始前，将作为克隆模板的原始section节点存储为固定的jQuery对象，全程基于这个固定模板克隆，避免实时查询DOM时把已生成的克隆节点纳入选择范围。
• 若需要让每个克隆节点对应数组中的时间值，可在克隆完成后将对应数组项写入节点内容。

$(function() {
  console.log( "jquery, ready!" );

  const usTime = ["9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm"];
  const militaryTime = [9, 10, 11, 12, 13, 14, 15, 16, 17];
  // 提前固定模板：仅取DOM初始状态下的第一个section节点作为克隆源
  const originalSection = $("section").first();

  for (let i = 0; i < usTime.length; i++) {
    // 基于固定模板克隆，不会匹配到循环中新增的节点
    originalSection.clone()
      // 写入对应数组的时间内容
      .text(`${militaryTime[i]} - ${usTime[i]}`)
      .appendTo("main");
  }
})

注意：如果作为模板的原始section本身放置在<main>标签内部，建议将模板节点移至main容器外，或设置为隐藏的占位模板，避免页面加载时原生模板被渲染成多余的占位元素。

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