jquery Dynamicalyクローンフィールドと増分ID

Question

このブロックをクローンする方法とタイトル番号を増やす方法はありますか？

"div-1"の各divには、追加と削除のオプションが必要です。 事前

<div class="block-1"> 

    <div class="fieldset-emp"> 
    <fieldset> 

     <h4>title 1</h4> 
     <label class="field-first arrow">First Name<em class="required">&#42;</em><input type="text" name="first_name" id="first_name" value="" /></label> 
     <label class="field-last arrow">Last Name<em class="required">&#42;</em><input type="text" name="last_name" id="last_name" value="" /></label> 

     <label class="field-mi arrow">Middle Initial<em class="required">&#42;</em><input type="text" name="mi" id="mi" value="" /></label> 
     <label class="field-ssn arrow">Social Security #<em class="required">&#42;</em><input type="text" name="ssn" id="ssn" value="" /></label> 
     <div class="eesradioitem-1"> 
     <label class="field-faddress arrow">Foreign Address<em class="required">&#42;</em></label> 
     <div class="eesradioitem"> 
      <label>Yes </label> 
      <input type="radio" name="faddress" value="yes" /> 
     </div> 
     <div class="eesradioitem"> 
      <label>No</label> 
      <input type="radio" name="faddress" value="no" checked="checked"/> 
     </div> 
     </div> 

     <label class="field-address1 arrow">Address line 1<em class="required">&#42;</em><input type="text" name="address1" id="address1" value="" /></label> 
     <label class="field-address2 arrow">Address line 2<em class="required">&#42;</em><input type="text" name="address2" id="address2" value="" /></label> 


     <label class="field-city arrow">City <em class="required">&#42;</em><input type="text" name="city" id="city" value="" /></label> 
     <label class="field-email arrow">Email <em class="required">&#42;</em><input type="text" name="email" id="email" value="" /></label> 


     <label class="field-dob arrow">Date of Birth <em class="required">&#42;</em><input type="text" name="dob" id="dob" value="" /></label> 
     <label class="field-homephone arrow">Home Phone<em class="required">&#42;</em><input type="text" name="homephone" id="homephone" value="" /></label> 
     <label class="field-gender arrow">Gender <em class="required">&#42;</em><input type="text" name="gender" id="gender" value="" /></label> 


    </fieldset> 
    </div> 

</div> 

Answer 1

私はここに私の例では、あなたのマークアップに、ボタンのカップルを追加しました：http://jsfiddle.net/w4efg/ を、それだけである：

$('.addme').click(function(ev) { 
    var aim = $(this); 
    var ap = aim.parent(); 
    var newbk = ap.clone(true); 
    var apindex = $('[class^=block-]').index(ap); 
    var bkId = 'block-' + (apindex + 1); 
    newbk.addClass('block-' + (apindex + 2)).removeClass(bkId); 
    ap.after(newbk); 
}); 
$('.removeme').click(function(){ 
    $(this).parent().remove(); 
}); 

はちょうど最初の3に取り組んでそれを表示するために私のCSSのクラスに注意してください。 。

私の例は、あなたがそれをちょっとだけ詰めたければ、それがはっきりしていることを示すために少し冗長です。また、最初のブロックを削除することができますが、それは悪いかもしれません:)。インデックスのロジックは新しい数値を追加するだけなので、ブロックxxはクリックしたブロックのインデックスとしてxxを取得します。

EDIT： 私は、「タイトル」のものを（タイトルH4のクラスをお勧めします）を加え、この更新で述べたようにいくつかのコードを取り出した：http://jsfiddle.net/w4efg/1/

Answer 2

のおかげで、あなたはこのような何かを行うことができますJavaScriptのフレームワーク、jQueryのを使用している場合...

は、機能を構築する...

var clone_block = function($block) { 

    block_num = Number($block.attr('class').substr(6))+1 // <-- Add one to block number 
    $cloned = $block.clone() 
    $cloned.children('.fieldset-emp h4:first').html('title '+block_num) 
    $cloned.attr('class','block-'+block_num) 
    return $cloned 
} 

...このようなことを可能にします。#id_of_your_block_containerは、すべてのブロックを含む要素のセレクタです。

clone_block($('.block-1')).appendTo($('#id_of_your_block_container')) 

「ブロック」<div>のブロックがすべてclassの"block"であり、ユニークなidを持つことをお勧めします。

<div id="block-1" class="block>...</div> 
<div id="block-2" class="block>...</div>