より効率的なjqueryのクローニング

Question

私はサイズを動的に入力配列を維持することができますので、私は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> 

とHERESに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> 

Answer 1

であなたは尋ねた以上のことをしたいですか？

私は、実際に物事をしたり、イベントを添付したり、データ群を要素のグループに追加したり（検証、変更イベントなど）、同様の状況がありました。私は各「行」のボタンを削除していました。したがって、データ、イベントなどを複製するだけでなく複製する必要がありましたが、必ずしもそうではありませんでした。最後の行の前、最後などに新しいものが必要になることがありました。

私はカスタムロー加算器をチェーンしたいと思っていました。

また、存在する「空白」行のデフォルト数が必要でした。

だから、あなたの構造（わずかに変更された）、私はこの思い付い与えられた：http://jsfiddle.net/BGJNP/

EDIT：追加perscribedとして、いくつかの検証があるバージョン：http://jsfiddle.net/BGJNP/1/

Answer 2

あり、おそらく、少なくとも半ダースをあなたの目標を達成し、より効率的にするための完全に有効な方法。私の2セントについては、私は次のようになります：A）ページに「Add New」リンクを1つだけ保持し、それにイベントをバインドし、決してクローンして破棄しないでください。あなたの "Add New"は常に空のフォームを1つ追加するだけです。

B）「新規追加」では、HTML文字列として、または添付されていないDOMノードとしてミニフォームを用意しています。前者の場合は、文字列を使用して、必要な場所に追加します。後者の場合は、複製して、それを必要な場所に貼り付けます（オリジナルはまだ添付されておらず、次の準備ができています）。ヘック、もしあなたが後者をしたいのであれば、ページが最初に初期化されるときに、空のフォームがあなたの「テンプレート」としてクローン化できる。

C）また、「新規追加」では、フォーム要素を無効にするというアイデアが好きなので、これをやり続けます。

申し訳ありませんコードサンプルはありませんが、うまくいけば、これはあなたにアイデアを与えます。