更有效的jquery克隆

所以我使用jquery來克隆一個div，所以我可以保持輸入數組的動態大小。它的工作正常，但我不禁看着它，並認爲在克隆之前添加類，這樣我可以更有效地完成從克隆中刪除類後克隆與刪除後刪除舊的添加更多鏈接。或者也許總體上更有效的方式來做到這一點。更有效的jquery克隆

繼承人的HTML：

<div class="reg_heading_description" id="bio_brothers"></div> 
       <div class="bio_brother"> 
        <div class="clearfix"> 
        <label>First Name</label> 
         <div class="input"> 
         <input type="text" name="bio_brother_first[]" style="float:left"/> 
        <label>Last Name</label> 
         <input type="text" name="bio_brother_last[]" style="margin-left:20px;"/>        
         </div>       
        </div> 
        <div class="clearfix"> 
        <a href="#" class="more_bio_brother more_relatives" >Add Another</a> 
        </div> 
       </div> 
      </div>

和繼承人的jQuery和它的是，在不衝突模式

<script type="text/javascript"> 
jQuery(document).ready(function() { 

    jQuery(".more_bio_brother").click(function() { 
     var here = jQuery(this).closest('div').parent(); 
     var names = jQuery(here).find('input'); 
     //validate 
     var check = 0; 
     jQuery.each(names, function() { 
      if (jQuery(this).val() == "") { 
       check = 1; 
      } 
     }); 
     if (check == 1) { 
      alert('You must enter a first and last name for this biological brother before you can add another.'); 
      return false; 
     } 
     //disable prior 
     jQuery.each(names, function() { 
      jQuery(this).attr('readonly', true); 
     }); 
     //add new 
     jQuery(here).addClass('old'); 
     jQuery('#bio_brothers').before(jQuery(here).clone(true)); 
     jQuery.each(names, function() { 
      jQuery(this).attr('readonly', false); 
      jQuery(this).val(""); 
     }); 
     jQuery(here).removeClass('old'); 
     jQuery('.old a').remove(); 
     return false; 
    }); 
}); 
</script>

來源

2011-12-15 Rooster

如果您將「$」傳遞到文檔就緒函數中，您可以在其中安全地使用$別名。 – 2011-12-15 19:03:23

所以，總結一下：你有一個包含兩個名字輸入和一個動作（添加新鏈接）的div。當採取行動時，你希望最終的結果是一個'克隆'（廣義上來說）這個div的輸入被禁用，鏈接被刪除，一個'新'（再次，外觀明智如果不是字面上節點明智的）div與空白輸入和一個閃亮的「添加新的」按鈕準備再次使用。你的問題是：「我是以最有效的方式做這件事，還是有更好的辦法？」 – 2011-12-15 19:15:45

。那是什麼在那裏，但它似乎可以更有效率。 – Rooster 2011-12-15 19:51:32

想要超過你問？

我有一個類似的情況，我真的會做的東西，附加事件，添加數據等一組元素（驗證，改變事件，無論）。我甚至在每個「行」上都有一個刪除按鈕。因此，我不僅需要克隆但克隆數據，事件等，但並非總是如此。有時我需要我的新東西在最後一行之前，最後等。

我也希望能夠鏈接我的自定義行加法器。

我也想要一個默認數量的「空白」行將存在。

因此，考慮到你的結構（略作修改），我想出了這一點：http://jsfiddle.net/BGJNP/

編輯：補充說，有一些審定perscribed版本：0

來源

2011-12-15 19:14:58

可能有至少半打完美有效的方法來實現您的目標，並使其更高效。對於我的兩美分，我會：

A）在頁面上只保留一個「添加新的」鏈接，將事件綁定到它，並且永遠不克隆和銷燬它。你的「添加新」總是隻有一份工作：添加一個新的空白表格。

B）在「添加新的」上，我會準備好一個迷你表單，既可以作爲HTML字符串，也可以作爲未附加的DOM節點。對於前者，使用該字符串並將其追加到需要去的地方;對於後者，將其克隆並粘貼到您想要的位置（原始文件仍未附加，並準備下一次使用）。哎呀，如果你想做後者，當頁面第一次初始化的時候，有一個空的表單，你可以克隆爲你的'模板'。 C）同樣在「添加新的」中，我喜歡你關於禁用表單元素的想法，所以我會繼續這樣做。

對不起，沒有代碼示例，但希望這給你一個想法。

來源

2011-12-15 19:57:47

更有效的jquery克隆

回答

相關問題