最初在jquery克隆中隐藏div

Question

我正在循环按钮单击一个div。但我需要的是最初隐藏.loop div并将其显示在按钮单击上。

目前它是克隆正在发生完美，唯一需要的是，不要最初显示div.loop。仅显示按钮。

这里是我当前的代码和DEMO

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('name', $(element).attr('name') + clicks); 
     }); 
    } 
}); 

Answer 1

clicks = 0; 
$('button').on('click', function() { 
    $('div.loop').show(); 
    if ($('div.loop').length < 5) { 
     clicks++; 
     if(clicks>1){ 
      alert("more 1"); 
      newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 
     } 
     else{ 
      alert("asd"); 
     newLoopDiv = $($('div.loop')[0]).appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 


    } 

    } 
}); 

更换和尝试这个代码yours..Hope这是你需要什么..

JSBIN DEMO

Answer 2

这里有几个选项。您最初可能会用CSS隐藏您的模板，然后在克隆上移除隐藏克隆的CSS。另一个选择是完全使用JavaScript创建您的“循环”元素，并在稍后添加。

Demo Option 1 - 在第一个div.loop模板上使用hide类，使用.removeClass()删除克隆上的类。

Demo Option 2 - 使用在jQuery中创建的模板而不是选择一个shell元素。

注意：我已将first name的名称属性更新为first_name。