Javascript Jquery克隆并更新所有ID

我想克隆一个

div

，使用它的

id

，里面有很多元素，它们也有自己的

id

，我想在克隆后更改

考虑以下HTML结构：

<div id='wrapper1'>
  <p id='test1'>Hello</p>
  <p id='my-awesome-id1'></p>
</div>

你好

我找到了，但它只会更改您克隆的主元素的

id

，而不会更改子元素

---

是否有一种方法可以将所有的

1

更新为

2

等等？

这样做可以创建一个克隆，如：

<div id="wrapper2">
  <p id="test2">Hello</p>
  <p id="my-awesome-id2"></p>
</div>

你好

这样做可以创建一个克隆，如：

<div id="wrapper2">
  <p id="test2">Hello</p>
  <p id="my-awesome-id2"></p>
</div>

你好

您可以使用如下功能：

function changeIdNumberOnElementAndChildren(element, newIdNumber) {
    var $element = $(element),
        $elementChildren = $element.children(),
        oldId = $element.attr("id"),
        newId = (oldId) ? oldId.replace(/\d+$/, newIdNumber) : null;

    if (newId) {
        $element.attr("id", newId);
    }

    if ($elementChildren.length > 0) { // recursively call function on children
        $elementChildren.each(function(i, child) {
            changeIdNumberOnElementAndChildren(child, newIdNumber);
        });
    }
}

然后只需在克隆上调用它即可更改ID：

$(function() {
    var clone = $("#wrapper1").clone();
    // below changes the ids so that they end in 559 rather than 1
    // (i.e. "wrapper559", "test559" and "my-awesome-id559")
    changeIdNumberOnElementAndChildren(clone, 559);
});

---

您可以使用如下函数：

function changeIdNumberOnElementAndChildren(element, newIdNumber) {
    var $element = $(element),
        $elementChildren = $element.children(),
        oldId = $element.attr("id"),
        newId = (oldId) ? oldId.replace(/\d+$/, newIdNumber) : null;

    if (newId) {
        $element.attr("id", newId);
    }

    if ($elementChildren.length > 0) { // recursively call function on children
        $elementChildren.each(function(i, child) {
            changeIdNumberOnElementAndChildren(child, newIdNumber);
        });
    }
}

然后只需在克隆上调用它即可更改ID：

$(function() {
    var clone = $("#wrapper1").clone();
    // below changes the ids so that they end in 559 rather than 1
    // (i.e. "wrapper559", "test559" and "my-awesome-id559")
    changeIdNumberOnElementAndChildren(clone, 559);
});

---

我刚刚回答了几乎相似的问题。看看是否有帮助。我刚刚回答了几乎相似的问题。看看会不会有帮助。忘记我上面提到的。假设根据我的示例，

test1

被定义为

Hello

，我如何更改

id

和

data num

属性？我还注意到，如果

wrapper1

中的元素一开始就没有

id

，您的解决方案将添加该属性，但没有任何值。这是一个问题，还是可以这样处理？要回答第一个问题，您只需检查匹配的数据属性，并对数据属性而不是ID进行类似的替换，而对于第二个问题，空属性可以，但是，您也可以在执行替换之前先添加检查。我应该将检查放在第一个或第二个

过滤器中吗？这是正确的<代码>子项（）

只查看子项。对于更深层的层次结构，您可以使用

find（'*'）

。忘记我上面提到的内容。假设根据我的示例，

test1

被定义为

Hello

，我如何更改

id

和

data num

属性？我还注意到，如果

wrapper1

中的元素一开始就没有

id

，您的解决方案将添加该属性，但没有任何值。这是一个问题，还是可以这样处理？要回答第一个问题，您只需检查匹配的数据属性，并对数据属性而不是ID进行类似的替换，而对于第二个问题，空属性可以，但是，您也可以在执行替换之前先添加检查。我应该将检查放在第一个或第二个

过滤器中吗？这是正确的<代码>子项（）

只查看子项。对于更深层的层次结构，可以使用

find（'*'）

。