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的下一个元素将成为第一个子代。

此外，

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

你可以使用$.each()来实现它，你的方式是循环永远不会退出，因为条件总是保持true。

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

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

FIDDLE：

注意：

请注意，我已经演示了如何执行此操作，但通常每个元素的id必须是唯一的。