javascript - jQuery .replaceWith 在循环中卡住

Question

今天我在编码，我用 while 尝试了一些东西循环和 jQuery .replaceWith但后来循环从未停止，我不知道为什么。

这是我的 html 代码:

<div class="x"></div><div class="x"></div><div class="x"></div>

这是我的 javascript 代码:

while($(".x").length !== 0) {
 $(".x:nth-child(1)").replaceWith('<div id="x"></div>');
}

此代码会卡住浏览器，但我不知道为什么。

我也试过这个:

while($(".x").length !== 0) {
 $(".x:nth-child(1)").remove();
}

那行得通。

我想做的是用 .x 类替换所有元素与 <div id="x"></div>

知道我的代码出了什么问题吗？

Answer 1

问题是 .x:nth-child(1) 匹配具有类 x 的元素，这是他父级的第一个子级。

在您的第一种情况下，您将第一个匹配项替换为另一个元素，因此 x 类的其他元素不会成为其父项的第一个子项。

在您的第二个代码中，您删除了它们，因此下一个具有 x 类的元素将成为第一个子元素。

此外，

• 避免在循环中使用$。搜索 DOM 很昂贵，最好在循环之前将结果存储在变量中。
• 您可以只测试 .length 而不是 .length !== 0
• 避免在循环中从静态字符串创建元素。您可以之前创建它并在循环内克隆它。
• 要遍历与选择器匹配的所有元素，最好使用 each
• 设置 id 时要小心，它们在文档中必须是唯一的。