처음 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를 제거하여 복제본을 숨길 수 있습니다. 또 다른 옵션은 자바 스크립트로 "루프"요소를 완전히 작성한 다음 나중에 첨부하는 것입니다.

Demo Option 1 - 첫 번째 div.loop 템플릿에 hide 클래스를 사용하고 .removeClass()을 사용하여 클론에서 클래스를 제거합니다.

Demo Option 2 - 쉘 요소를 선택하는 대신 jQuery에서 만든 템플릿을 사용하십시오.

참고 : first name의 이름 속성을 first_name으로 업데이트했습니다.