如何使用jquery克隆或复制字段？ [英] how to clone or duplicate fields with jquery?

问题描述

我有这个标记

I have this markup

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

It's possible to clone or duplicate it incrementing the 0 value every time the user make click on a link? I mean all the 0 when user clicks one time the link need to go to 1 then if click again need to go to 2 and so on and of course maintaining the same markup every time, any advice or help?

提前致谢

Cheers and thanks in advance

推荐答案

你可以尝试一下这样的事情：

You could try a little something like this:​

$("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（）最后一个），然后从在这个名字的中间，并通过正则表达式替换它。

Essentially on click of your anchor it will clone the last div and append it to the body (at least my example appends to the body - obviously you could append it to something more specific or .insertAfter() the last one), then take the number from the middle of the name and increment it via a regex replace.

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

Having done that though I'd like to note that you don't need to give your inputs unique names: all of the server-side technologies that I'd care to use can deal with multiple request parameters with the same name (e.g., Java has getParameterValues() that returns an array).

编辑：这是一个版本，它只克隆输入元素，特别是div中的最后一个输入，更新其id，并追加它到div的结尾。根据你的评论，这不再改变名称（尽管显然如果你想改变名字，你可以像上面那样引入一个额外的 .attr（）>调用）。哦，而且这也设置值为空白（我忘了这么做）。

Here's a version that clones only the input element, specifically the last input in the div, updates its id, and appends it to the end of the div. As per your comment this no longer changes the name (though obviously you can just throw in an additional .attr() call as above if you want to change the name too). Oh, and also this sets the value to blank (I forgot to do that above).

$("#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/

这篇关于如何使用jquery克隆或复制字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！