Question

如何克隆此块并增加标题号，如果可能的话增加ID？

对于每个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作为您单击的块之后的索引，可能会更好。

编辑：我添加了“标题”内容（可能需要在h4上为标题添加一个类）并取出本更新中提到的一些代码：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>的{{1}} class具有唯一的"block"，例如

id

jquery动态克隆字段并增加id

2 个答案: