时间戳

首页 > 解决方案 > 如何更改已分配给 JQuery 中变量的 div 中元素的 id？

jquery - 如何更改已分配给 JQuery 中变量的 div 中元素的 id？

问题描述

如果我有一些带有嵌套元素的 html：

<body id="body">
    <div id="outer-div-0">
        <div id="inner-div-0">
        </div>
    </div>
</body>

还有一些将外部 div 分配给变量的 JQuery：

var $div = $('div[id^="outer-div-"]:last');

我可以使用$div变量来更改 idinner-div-0吗？

我这样做是因为我有一些 JQuery 会outer-div-0在用户单击按钮时克隆，因为用户可能需要 div 的多个实例（这是一个输入表单，所以我必须使用允许用户添加和减去的按钮需要多少份表格）。我已经有一些代码可以为每个克隆增加外部 div 的 id。所以现在，当我点击按钮添加一个新的 div 时，它最终看起来像

<body id="body">
    <div id="outer-div-0">
        <div id="inner-div-0">
        </div>
    </div>
    <div id="outer-div-1">
        <div id="inner-div-0">
        </div>
    </div>
</body>

这是执行此操作的 JQuery：

var $div = $('div[id^="outer-div-"]:last');
initNum = parseInt($div.prop("id").match(/\d+/g), 10) + 1;
var $newDiv = $div.clone().prop('id', 'outer-div-' + initNum);
$("#body").append($newDiv).html();

当然，我还必须增加内部 div 的 id，但我无法弄清楚。

我应该补充一点，我使用 id 作为内部 div，因为它们具有带有for属性的标签。为简单起见，我将它们省略了，因为它们并没有真正增加问题。另外，实际的代码有不止一个inner-div。再次，为了简单起见，省略了。

关于如何做到这一点的任何想法？几个小时以来，我一直在挠头。谢谢！

标签： jqueryhtml

解决方案

您可以.find()在克隆的 DIV 上使用

$newDiv.find("[id^=inner-div-]").attr('id', 'inner-div-' + initNum);

推荐阅读