如何使用 jquery 克隆或复制字段？答案

【问题标题】：how to clone or duplicate fields with jquery?如何使用 jquery 克隆或复制字段？
【发布时间】：2012-02-26 05:49:28
【问题描述】：

我有这个标记

<div class="input text">
   <label for="Experience0ExperienceContent">Experience Content</label>
   <input name="data[Experience][0][experience_content]" class="span3" id="Experience0ExperienceContent" type="text">
</div>

每次用户单击链接时，是否可以克隆或复制它以递增 0 值？我的意思是当用户单击一次链接需要转到 1 时所有 0，然后如果再次单击需要转到 2 等等，当然每次都保持相同的标记，有什么建议或帮助吗？

提前致谢

【问题讨论】：

将数据存储在“名称”属性中意味着您可能做错了。我会考虑将数据存储在其他地方——可能是“数据”属性或其他东西。
我没有在 name 中存储任何内容只是分配给该字段的名称，它被称为 data[Experience][0][experience_content] ;-)

标签： javascript jquery html

【解决方案1】：

你可以试试这样的：

$("a").click(function() {        
    $("div.input.text")
        .last()
        .clone()
        .appendTo($("body"))
        .find("input").attr("name",function(i,oldVal) {
            return oldVal.replace(/\[(\d+)\]/,function(_,m){
                return "[" + (+m + 1) + "]";
            });
        });        
    return false;        
});

如下所示：http://jsfiddle.net/6Xg4S/

基本上在单击您的锚点时，它会克隆最后一个 div 并将其附加到正文（至少我的示例附加到正文 - 显然您可以将其附加到更具体的内容或 .insertAfter() 最后一个），然后取名称中间的数字并通过正则表达式替换递增。

虽然我想指出您不需要为您的输入提供唯一的名称，但已经这样做了：我想使用的所有服务器端技术都可以处理具有相同名称的多个请求参数（例如，Java 有 getParameterValues() 返回一个数组）。

编辑：这是一个仅克隆输入元素的版本，特别是 div 中的最后一个输入，更新其 id，并将其附加到 div 的末尾。根据您的评论，这不再更改名称（尽管如果您也想更改名称，显然您可以像上面那样添加一个额外的 .attr() 调用）。哦，这也将值设置为空白（我忘了在上面这样做）。

$("#extra a").click(function() {   
    var $div = $(this).next();
    $div.find("input")
        .last()
        .clone()
        .appendTo($div.append("<br/>"))
        .val("")
        .attr("id",function(i,oldVal) {
            return oldVal.replace(/\d+/,function(m){
                return (+m + 1);
            });
        });
    return false;
});

演示：http://jsfiddle.net/6Xg4S/4/

【讨论】：

好的，这就像 jsfiddle 节目一样工作正常，但我如何只能克隆输入字段而不是全部？我还想在克隆下方显示新输入，这可能吗？对不起我的无知，但我对 jQuery 不太擅长:(
另外，我不需要像你说的那样更改名称，但需要更改 ID，我尝试在你离开这里的函数中通过 id 更改名称并且不起作用
@ReynierPM 将appendTo($("body")) 替换为insertAfter("div.input.text:last")
您只想克隆输入？标签呢？如果你把输入 inside 你根本不需要 id 属性的标签：<label>Experience Content<input .../></label>。您能否更新您的问题以提供“之后”示例，以便 100% 明确您想要的结果？ “我想在之前的克隆下方显示新输入” - 我不明白；你的意思是“低于克隆的输入”？
不，我不需要克隆所有的 div 而不是标签，只需克隆输入元素，当然随时增加 ID 值，因为代码现在所有的 div 都是克隆的，我不想要这个，我应该做哪些修改来实现这个？

【解决方案2】：

首先，给它一个 id 以获得更好的选择器性能，我假设它是 foo 用于链接，bar 用于字段：

function buildId(id) {
  return 'data[Experience][' + id + '][experience_content]';
}

jQuery('#foo').click((function () {
  var i = 0;
  return function () {
    var $bar = jQuery('#bar');
    $bar
      .clone()
      .attr('id', buildId(i++))
      .insertAfter($bar);
  };
})());

查看jQuery API 了解所使用的方法。

【讨论】：

好的，这项工作，但根本不是正确的方式，所以我做了一些修改以获得我想要的，功能是这个：pastebin.com/yHX3PtRp 因为我只想克隆输入字段，但将 id 和 name 值增加一个（i++）但它不起作用，只是第一次克隆并且值没有增加我错过了什么？怎么了？
@ReynierPM check pastebin.com/GTvXV7br 它会将ith 元素克隆到另一个id为i + 1的元素中

【解决方案3】：

您可以使用 jquery clone() 方法然后检索实际元素的名称，然后更新新的元素名称。阅读here了解更多

举个例子

  <!DOCTYPE html> 
<html> 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
</head> 


<body> 
<a href="#" id="cloneme" name="cloneme">Clone Me</a>
<div class="input text">
   <label for="Experience0ExperienceContent">Experience Content</label>
   <input name="data[Experience][0][experience_content]" class="span3" id="Experience0ExperienceContent" type="text">
    <input type="hidden" id="currentval" name="currentval" value="0" />

</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("a").click(function(){
            var currentval = parseInt($("#currentval").val()) + 1;
            var cloneme = $("#Experience0ExperienceContent").clone();
            var newid = "Experience" + currentval + "ExperienceContent";
            cloneme.attr("id",newid);
           $("#currentval").val(currentval);
            $("div").append(cloneme);
        });
    })
</script>


</body>
</html>

编辑：

这里是 jsfiddle 中代码的链接：http://jsfiddle.net/kYwXX/1/

【讨论】：

文档的链接在哪里？阅读此处了解更多信息
是的，我知道，但问题是我不知道如何构建选择，因为您注意到 HTML 标记有这个
所以当我克隆 HTML一次又一次，jQuery 是如何知道选择哪个
的？
我包含了一个克隆输入文本的示例。当您克隆时，我正在增加一个隐藏的输入值，该值最初设置为零。因此，基于此，我可以更新克隆的元素 ID。
@Reynier，是的，上面的代码正在克隆输入元素，它更新了新元素的 'id' 属性。打开您的 chrome 开发人员工具，并在克隆时查看更改。
@DG3，不，它对我不起作用，请参阅此 URL 中的图像以获取结果 dropmocks.com/mBgo4I Firebug NaN 中的通知 :(