javascript - 如何使用 jquery 克隆或复制字段？

Question

我有这个标记

<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 等等，当然每次都保持相同的标记，有什么建议或帮助吗？

提前干杯和感谢

Answer 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/

基本上在点击你的 anchor 时它会克隆最后一个 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/