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

您可以使用$.each() 来实现它，您执行while 循环的方式将永远不会退出，因为条件将始终保持true。

你正在做的方式将擦除 div 的内容。

$(".x").each(function() {
 $(this).removeClass("x"); // remove class x
 $(this).prop("id","x");  // add id x
});

小提琴：

http://jsfiddle.net/ehsansajjad465/04tdd2s9/

注意：

请注意，我已经演示了如何做到这一点，但通常每个元素的 id 必须是唯一的。

Answer 2

冻结的原因是，只要有 .x 元素，您就一直在循环，但在循环中，您只会替换其中的 一个，因为选择器 .x:nth-child(1) 只会匹配一个元素，如果它有类 x 并且它是其父元素中的第一个元素。它不会选择第一个 .x 元素。所以你替换第一个，然后无限循环，根本不做替换。

你最好使用each：

$(".x").each(function() {
  $('<div id="x"></div>').replace(this);
});

假设您确实需要替换元素，而不是简单地删除类并为它们分配id。如果这就是您需要做的全部，Ehsan's answer 可以满足您的需求。

---

但一定要给每个人一个不同的id。文档中仅允许 一个 元素具有给定的id 值。

Answer 3

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

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

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

此外，

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