jquery Динамически клонировать поля и инкрементный идентификатор

Question

Как можно клонировать этот блок, а также увеличить номер заголовка и, если возможно, увеличить идентификаторы?

Для каждого div "block-1" я хочу добавить и удалить опцию. Заранее спасибо

<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();
});

Обратите внимание на классы в моем CSS, чтобы показать, как он работает с первыми тремя.

Мой пример немного многословен, чтобы показать, что он делает, если вы хотите немного разбить его на части. Это также позволяет удалить первый блок, что может быть плохо :). А логика для индекса просто добавляет новое число, так что block-xx получает xx в качестве индекса ПОСЛЕ того блока, по которому вы щелкаете, и, возможно, будет лучше.

EDIT: Я добавил материал "title" (может понадобиться класс для h4 для title) и вытащил некоторый код, как отмечено в этом обновлении: http://jsfiddle.net/w4efg/1/

Answer 2

Если вы используете jQuery javascript Framework, вы можете сделать что-то вроде этого ...

Создание функции ...

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>