如何使用 jQuery 克隆、修改和添加元素？

Posted 2023-04-13

【中文标题】如何使用 jQuery 克隆、修改和添加元素？

【英文标题】：How can I clone, modify, and prepend an element with jQuery?

【发布时间】：2011-07-10 20:22:30

【问题描述】：

我想克隆并添加一个 div，但是我想更改添加的 div 名称 在每次迭代中从 preConfi 到 preConfiXX（例如 preConfiA1、preConfiB1）。我可以使用什么语法？

/* on initial load,  move default template into each GroupX location */
var groups = ['A','B','C','D','E','F','G']
for (var groupLetter in groups)
    $('#template').clone().prependTo('#placeholder' + groups[groupLetter]);



        <!-- ************************** --> 
    <!-- *******  GROUPS   ******** --> 
    <!-- ************************** --> 
    <div id='groupA' class='preGroups'> 
    GroupA
    <div id="placeholderA"></div>
    </div>

    <div id='groupB' class='preGroups'> 
    GroupB
    <div id="placeholderB"></div>   
    </div>

         ....

    <div id='groupF' class='preGroups'> 
    <div id="placeholderF"></div>
    GroupF
    </div>


<div id='template'> 
<input type="radio" data-theme="a" name="preConfi" id="radio-choice-1" value="C" /> 
<input type="radio" data-theme="a" name="preConfi" id="radio-choice-2" value="T" /> 
<input type="radio" data-theme="a" name="preConfi" id="radio-choice-3" value="P" /> 
</div> 

【问题讨论】：

你的问题不清楚，能否给我们一个你想要实现的输出示例？

对不起，我不明白你在做什么。更改每个克隆模板中的 preConfi？

+1 需要一点点。

对不起...我改进了我的解释。

+1 同意。我想我可以理解，但我们需要更多信息才能确定。

【参考方案1】：

我会尝试一下我认为你想要的：

$(document).ready(function() 
    var groups = ['A','B','C','D','E','F','G'];
    for (var groupLetter in groups)
        var myClone = $('#template').clone();
        myClone.attr("id", "template-"+groups[groupLetter]);

        var index = 1;
        myClone.find("input[type^=radio]").each(function() 
            var myName = $(this).attr("name");
            $(this).attr("name", myName+groups[groupLetter]+index++);
        );

        myClone.prependTo('#placeholder' + groups[groupLetter]);
    
);

http://jsfiddle.net/a5HB7/3/

【讨论】：

清理了一个缺失的结束括号。

在不该出现的地方多了一个 ()。

不要忘记页面上应该只有一个元素具有任何给定的 ID。所以你想更改克隆的 ID。