Jquery 在克隆代码中查找并替换ID

在我的HTML中，我有一个ID为room-row-1的div。我使用以下Jquery创建了一个新ID为room-row-2的克隆

//Clone Extra Rooms
var cloneIndex = $(".clonedRoom").length;

$('#add-room').click(function () {
    cloneIndex++;
    $('.add-persons-to-room-wrapper').first().clone()
    .attr("id", "room-row-" + cloneIndex)
    .appendTo('#room-list');
 });

这个很好用。在克隆的代码中，有些元素的Id仍然是房间1，例如：

<select name="rooms[]" id="room1" class="form-control">

---

但是这是无效的代码。

我现在修改了我的函数，如下所示：

$('#add-room').click(function () {
    cloneIndex++;
    $('.add-persons-to-room-wrapper').first().clone()
    .attr("id", "room-row-" + cloneIndex)
    .find("*").each(function () {
        var id = this.id || "";
        var match = id.match(regex) || [];
        if (match.length == 3) {
            this.id = match[1] + (cloneIndex);
        }

    })
    ;

});

此代码改编自并解决了重命名项目的问题，只要编号位于Id的末尾-例如：select Id=“room1”

---

我将使用类和属性进行测试，看看这是否仍然适用

是否有理由使用这么多的唯一ID而不是类的简单数据属性<代码>。不用担心增量id属性。正如您现在所发现的，它们总是成为维护方面的难题。使用公共类并通过索引进行遍历。无论如何，使用

.html（）

不是正确的答案。序列化DOM并再次反序列化它是个坏主意，因为它会破坏原始元素以及任何事件处理程序或与之相关的其他数据。@H2Ooooo:我使用ID纯粹是因为我认为您应该这样做。我想我可以使用数据属性。@Rorymcrossan谢谢Rory。我会调查的。正如您在下面看到的，我已经完成了一些修复，但我肯定会考虑使用公共类。关于这样做的好文章有什么建议吗？

$('#add-room').click(function () {
    cloneIndex++;
    $('.add-persons-to-room-wrapper').first().clone()
    .attr("id", "room-row-" + cloneIndex)
    .find("*").each(function () {
        var id = this.id || "";
        var match = id.match(regex) || [];
        if (match.length == 3) {
            this.id = match[1] + (cloneIndex);
        }

    })
    ;

});