JQuery追加方法多个父元素追加相同元素答案

【问题标题】：JQuery append method multiple parent elements append same elementJQuery追加方法多个父元素追加相同元素
【发布时间】：2017-07-05 03:32:19
【问题描述】：

正如 API 文档声明的那样：

如果以这种方式选择的元素被插入到单个位置在 DOM 的其他地方，它将被移动到目标中（未克隆）。重要提示：但是，如果有多个目标元素，则克隆将为每个目标创建插入元素的副本，除了最后一个。

var div = $("<div></div>").addClass("divCells"),
    tdName = $("<td></td>").addClass("tdName"),
    tdAge = $("<td></td>").addClass("tdAge"),
    tdGender = $("<td></td>").addClass("tdGender"),
    tds = [tdName, tdAge, tdGender],
    tr = $("<tr></tr>"),
    tbody = $("#peopleList tbody");
    tds.append(div);
    tr.append(tdName).append(tdAge).append(tdTimetdGenderstamp);
    tbody.append(tr);

如上面的代码所示，我尝试将 3 个 tds 包含到一个数组中，这样我就可以将 div 附加到所有这些中，但它不起作用。

【问题讨论】：

循环遍历数组并在数组的每个元素上附加div
tds 是一个数组而不是 jquery 对象。 append 不起作用
控制台有js错误吗？
but it is not working 是如此毫无意义，因为它绝对不包含任何信息......Array 没有 append 方法 - 如果您检查浏览器，错误的来源对您来说很明显开发者工具控制台

标签： javascript jquery

【解决方案1】：

您正在尝试在原生 JavaScript 数组上使用 jQuery .append。 .append 仅适用于 jQuery/DOM 元素，不适用于数组等 JavaScript 类型。

您的 tds 数组包含 jQuery/DOM 元素，但数组本身并不能以您尝试的方式“附加”。

使用数组，您必须遍历数组，并手动将 div 附加到其中的每个元素。此外，由于您将分别附加到 3 个单独的元素（即每次迭代 1 个，而不是同时添加 3 个），您必须自己手动 .clone div，否则您只需将一个 div 附加到数组中的第一个项目，然后将相同的 div 移动到第二个，再到第三个。所以...

// tds.append(div); // Change this to...
for (var i=0; i< tds.length; i++) {
   tds[i].append(div.clone())
}

或者...

您可以完全忘记使用 Array，并让 jQuery 克隆并为您附加 div（正如您最初的问题所暗示的那样）。方法如下...

// Remove the following lines...
// tds = [tdName, tdAge, tdGender],
// tds.append(div);

// Then, after you add the td's to your row here...
tr.append(tdName).append(tdAge).append(tdGender);

// ...have jQuery find all the td's and clone+append your div to them in one hit:
tr.find('td').append(div)

【讨论】：