单击鼠标添加div

Question

当用户单击添加另一个成员按钮时，我需要显示div。用户只能添加5个成员，所以我如何使生成特定div的操作只进行五次？

这是需要在单击时显示的div。但不是克隆，因为我需要为验证的所有文本框添加不同的名称属性。

<div class="loop">
   <input type="text" value="first name" />
   <input type="text" value="lastname" />
   <input type="text" value="mail" />
   <input type="text" value="company" />
</div>
<button>Add person</button>

我需要在单击按钮时生成相同的div。但他们最多只能创造5次。

Answer 1

此解决方案将克隆div，并将name属性添加到此div内的所有输入，并使用name=value+id:DEMO：http://jsfiddle.net/R5urc/

 <div class='parentDiv'>   
    <div class="loop">
       <input type="text" value="first name" />
       <input type="text" value="lastname" />
       <input type="text" value="mail" />
       <input type="text" value="company" />
  </div>

您的按钮：

<button id='add' onclick='addPerson()'>Add person</button>

JS代码：

 <script type='text/javascript'
     function addPerson(){
        if ($('div.loop').length<5) {
           var clonedDiv=$($('div.loop')[0]).clone().appendTo('.parentDiv');
           clonedDiv.find('input').each(function() {
             $(this).attr('name',$(this).val()+$('div.loop').length);
           });
        }
     }
 </script>

Answer 2

正如@techfoobar所说，jQuery的克隆函数将是您的解决方案。

以下是HTML，它将促进这一点：

<div class='container'>
    <div class="loop">
        <input type="text" value="first name" />
        <input type="text" value="lastname" />
        <input type="text" value="mail" />
        <input type="text" value="company" />
    </div>
</div>
<button>Add person</button>

需要Javascript：

clicks = 0;
$('button').on('click', function () {
    if ($('div.loop').length < 5) {
        clicks++;
        newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
        $('input', newLoopDiv).each(function (index, element) {
            $(element).attr('value', $(element).attr('value') + clicks);
        });
    }
});

在此处进行演示http://jsfiddle.net/wRJAe/3/

Answer 3

这里可以动态设置文本框值

   <div class="main_loop">    
        <div class="loop" style="display:none;">
           <input type="text" value="first name" />
           <input type="text" value="lastname" />
           <input type="text" value="mail" />
           <input type="text" value="company" />
        </div> 
    </div>
        <div class="main">
        </div>
        <button>Add person</button>

$('button').on('click', function () {
   if ($('.main .loop').length < 5) {
     $('.main_loop .loop').clone().appendTo(".main").show();
     $(".main .loop:nth-child("+$('.main .loop').length+")").children().each(function(){
         $(this).val($(this).val()+$('.main .loop').length);
     });
    }
});