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值吗？我的意思是0当用户点击一次链接需要转到1然后再次点击需要转到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/

基本上点击你的锚点它将克隆最后一个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/

Answer 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中使用的方法。

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

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

3 个答案: