Question

HTML：

<div class="main_holder">
      <div class="input_holder">
        <label for="something">Email</label><br/>
            <input type="text" id="field_input" name="email" /> 
      </div>
      <a href="#" class="add">Add+</a>

      <div class="input_holder">
        <label for="something">Address</label><br/>
            <input type="text" id="field_input" name="address" /> 
      </div>
      <a href="#" class="add">Add+</a>

      <div class="input_holder">
        <label for="something">Name</label><br/>
            <input type="text"  id="field_input" name="name" /> 
      </div>
      <a href="#" class="add">Add+</a>
    </div>

Jquery的

$('a.add').click( function() { 
        var n=$(this).prevAll('.input_holder').size()+1;
        $(this).prev('.input_holder').clone().insertBefore(this);
        $(this).prev('.input_holder').find('label').append(n);
        return false;
    });

因此，如果我的标签名称是电子邮件，则结果是：

第一次点击：电子邮件2
第二次点击：电子邮件23
第三次点击：电子邮件234

原因是这样做是因为在每次追加之后它会占用已经有数字的前一个。所以我现在的问题是如何解决这个问题，所以它只将每个数字放一次

我想要的结果：

第一次点击：电子邮件2
第二次点击：电子邮件3
第三次点击：电子邮件4

Answer 1

尝试使用正则表达式.replace：

$(this).prev('.input_holder').find('label').append('0').text( function(i,str) {
    return str.replace(/\d+$/, n);
});

http://api.jquery.com/text/

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace

Answer 2

HTML

<div class="main_holder">
  <div class="input_holder">
    <label for="something">Email</label><br/>
    <input type="text" id="field_input" name="email" /> 
  </div>
  <a href="#" class="add">Add+</a>

  <div class="input_holder">
    <label for="something">Address</label><br/>
    <input type="text" id="field_input" name="address" /> 
  </div>
  <a href="#" class="add">Add+</a>

  <div class="input_holder">
    <label for="something">Name</label><br/>
    <input type="text"  id="field_input" name="name" /> 
  </div>
  <a href="#" class="add">Add+</a>
</div>

<强> JS

$('a.add').click( function(e) { 
  var $this = $(this),
      $prev = $this.prevUntil('.add');

  $prev.last().clone().insertBefore(this);
  $this.prev('.input_holder').find('label').append($prev.length + 1);

  e.preventDefault();
});

<强>的jsfiddle

http://jsfiddle.net/4B3xU/

我修改了JS，但没有修改html。

这就是我所做的：

你总是克隆第一个输入，所以永远不要得到这个数字
修复了即使您要添加地址输入
删除了返回false，转而使用e.preventDefault（）;
点击一些选择器。可以做得更多，但这应该足够了。

jquery在标签后附加一个增量

2 个答案: