克隆与 parents 克隆做同样的事情

Question

我有这样的代码，当我在单击按钮克隆之前从 select 框中选择列表时，它显示数据，所以在单击按钮克隆之后，为什么它直接出现在克隆上的数据？我想要的是当我从 select 框克隆中选择列表时，克隆不会直接出现在我从 select 框克隆中选择列表之前的数据。

而其他问题是克隆对另一个她的 parents 或其他克隆的影响。如何在不影响其他克隆的情况下克隆技术？

$(document).ready(function(){
  $(document).on( "click", "a#addhewan", function() {
   var confirm = window.confirm('Yakin menambah data hewan??');            
   if(confirm == true){                
    var newForm = $('.form1 .data_hewan').html();            
    $(newForm).insertBefore('.newForm');
             // $('.master-hewan').addClass('hidden');        
         }
     });

  $(document).on("change","#pet_name",function(){
   var allRule = $('.all-rule');
   if($(this).val() == 1){
    var form1 = $('.form1').find('.all-rule .formRule1').clone().removeClass('hidden');
    $(form1).appendTo('.show-rule');
   }
  })
 });

.hidden{
  display: none;
 }

<!DOCTYPE html>
<html>
<head>
 <title>fdsjf</title>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
 <div class="form1">
  <div class="data_hewan">
   <select name="pet" class="form-control" id="pet_name">
    <option value="" selected="selected">Pilih Ras Hewan</option>
    <option value="1">Korean Jindo</option>
    <option value="2">Siberian Husky</option>
    <option value="3">Maine Coon</option>
   </select>

   <div class="all-rule hidden">
    <div class="formRule1 hidden">
     <span>halo</span>
    </div>
    <div class="formRule2 hidden">
     <span>eooo</span>
    </div>
   </div>
   <div class="show-rule">
   </div>
   <div class="newForm">

   </div>
  </div>
  <a id="addhewan" name="add" id="addhewan">Add Hewan</a>
 </div>

 
</body>
</html>

我想要的：

Answer 1

您需要修复 html 和 jQuery 选择器 $('.form1').find('.all-rule .formRule1') 将应用于所有 .formRule1，因此您需要指定父项。检查下面的代码：

$(document).ready(function(){
  $(document).on( "click", "a#addhewan", function() {
   var confirm = window.confirm('Yakin menambah data hewan??');            
   if(confirm == true){                
       var newForm = $('.form1 .data_hewan:first').clone();            
                newForm.find('.show-rule').html('');
    newForm.insertBefore('.newForm');
             // $('.master-hewan').addClass('hidden');        
         }
     });

  $(document).on("change","#pet_name",function(){
   var data = $(this).parent();
   if($(this).val() == 1){
    var form1 = data.find('.all-rule .formRule1').clone().removeClass('hidden');
    form1.appendTo(data.find('.show-rule'));
   }
  })
 });

.hidden{
  display: none;
 }

<!DOCTYPE html>
<html>
<head>
 <title>fdsjf</title>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
 <div class="form1">
  <div class="data_hewan">
   <select name="pet" class="form-control" id="pet_name">
    <option value="" selected="selected">Pilih Ras Hewan</option>
    <option value="1">Korean Jindo</option>
    <option value="2">Siberian Husky</option>
    <option value="3">Maine Coon</option>
   </select>

   <div class="all-rule hidden">
    <div class="formRule1 hidden">
     <span>halo</span>
    </div>
    <div class="formRule2 hidden">
     <span>eooo</span>
    </div>
   </div>
   <div class="show-rule">
   </div>
  </div>
  <div class="newForm"></div>
  <a id="addhewan" name="add" id="addhewan">Add Hewan</a>
 </div>

 
</body>
</html>

克隆与 parents 克隆做同样的事情

cloning does the same thing as parents clone

jquery

clone