Jquery克隆并更新所有ID答案

【问题标题】：Jquery Clone and Update All idsJquery克隆并更新所有ID
【发布时间】：2016-07-02 15:50:55
【问题描述】：

我想克隆一个div，使用它的id，其中包含许多元素，其中还有自己的id，我想在克隆后更改。

考虑这个 HTML 结构：

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

我找到了this on SO，但它只会更改您克隆的主要元素的id，而不是子元素。

有没有办法可以将所有1 更新为2 等等？

【问题讨论】：

我刚刚回答了几乎类似的问题Here。看看会不会有帮助。

标签： javascript jquery html clone

【解决方案1】：

这样做会创建一个克隆，如下所示：

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

$('div').clone().filter(function() {
  $(this).prop('id', $(this).prop('id').replace('1', '2')).children().filter(function() {
    return $(this).prop('id', $(this).prop('id').replace('1', '2'))
  });
  return $(this)
}).appendTo('body')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='wrapper1'>
  <p id='test1'>Hello</p>
  <p id='my-awesome-id1'></p>
</div>

【讨论】：

忘记我上面提到的。假设根据我的示例test1 定义为<p id='test1' data-num='1'>Hello</p>，我该如何更改id 和data-num 属性？
我也刚刚注意到，如果wrapper1 中的元素首先没有id，您的解决方案将添加该属性但没有任何值。这会是一个问题吗？还是那样放着它安全吗？
要回答您的第一个问题，您只需检查匹配的数据属性并在数据属性而不是 ID 上进行类似的替换，而对于您的第二个问题，空属性很好，但是您也可以在替换之前先添加一个检查。
我应该把支票放在第一个还是第二个filter？
没错。 children() 只看孩子。对于更深层次的层次结构，您可以使用find('*')。

【解决方案2】：

你可以使用这样的函数：

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);
});

【讨论】：