动态克隆字段和增量ID [英] jquery Dynamicaly clone fields and increment id

问题描述

对于每个divblock-1，我希望添加一个新的标题号码，如果可能的话，增加标题号码并删除选项。
提前致谢

 < div class =block-1> 
 
< div class =fieldset-emp> 
< fieldset> 
 
< h4> title 1< / h4> 
< label class =field-first arrow>名字< em class =required>&＃42;< / em>< input type =textname =first_name id =first_namevalue =/>< / label> 
< label class =field-last arrow>姓氏< em class =required>&＃42;< / em>< input type =textname =last_name id =last_namevalue =/>< / label> 
 
< label class =field-mi arrow> Middle Initial< em class =required>&＃42;< / em>< input type = name =miid =mivalue =/>< / label> 
< label class =field-ssn arrow> Social Security＃< em class =required>&＃42;< / em>< input type =textname = ssnid =ssnvalue =/>< / label> 
< div class =eesradioitem-1> 
< label class =field-faddress arrow>外部地址< em class =required>&＃42;< / em>< / label> 
< div class =eesradioitem> 
< label>是< / label> 
< input type =radioname =faddressvalue =yes/> 
< / div> 
< div class =eesradioitem> 
< label>否< / label> 
< input type =radioname =faddressvalue =nochecked =checked/> 
< / div> 
< / div> 
 
< label class =field-address1 arrow>地址行1< em class =required>&＃42;< / em>< input type =text name =address1id =address1value =/>< / label> 
< label class =field-address2 arrow>地址行2< em class =required>&＃42;< / em>< input type =textname = address2id =address2value =/>< / label> 
 
 
< label class =field-city arrow>城市< em class =required>&＃42;< / em><输入类型=textname =cityid =cityvalue =/>< / label> 
< label class =field-email arrow>电子邮件< em class =required>&＃42;< / em>< input type =textname =email id =emailvalue =/>< / label> 
 
 
< label class =field-dob arrow>出生日期< em class =required>&＃42;< / em>< input type =textname =dobid =dobvalue =/>< / label> 
< label class =field-homephone arrow>家庭电话< em class =required>&＃42;< / em>< input type =textname =homephone id =homephonevalue =/>< / label> 
< label class =field-gender arrow> Gender< em class =required>&＃42;< / em>< input type =textname =gender id =gendervalue =/>< / label> 
 
 
< / fieldset> 
< / div> 
 
< / div> 
  

解决方案

我在你的标记中添加了几个按钮这里的例子： 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/

How can I clone this block and also increment the title number and if possible increment the ids?

To each div "block-1" i want to have add and delete option. Thanks in advance

<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>

解决方案

I added a couple of buttons to your markup in my example here: http://jsfiddle.net/w4efg/ then it is just:

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

Note the classes in my CSS just to show it working on the first three.

My example is a bit verbose to show what it does clearly if you want to chunk it down a bit. It also allows the first block to be deleted which might be bad :). And the logic for the index just adds a new number, so the block-xx gets the xx as the index AFTER the block you click in and might be better done.

EDIT: I added the "title" stuff (might want a class on the h4 for title) and took out some code as noted in this update: http://jsfiddle.net/w4efg/1/

这篇关于动态克隆字段和增量ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！