Question

这是我的HTML

<div class="main_holder">
  <div class="input_holder">
    <label for="something">Some Label</label><br/>
        <input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> 
  </div>
  <a href="#" class="add">Add+</a>

  <div class="input_holder">
    <label for="something">Some Label</label><br/>
        <input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> 
  </div>
  <a href="#" class="add">Add+</a>

  <div class="input_holder">
    <label for="something">Some Label</label><br/>
        <input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> 
  </div>
  <a href="#" class="add">Add+</a>
</div>

这是我的jquery

var increment=1;
$('a.add').click(function() {
  increment++;

  $(this).prev('input_holder').clone().insertBefore(this).prevAll('label').text(increment);

  return false;
});

我的想法是当我克隆一个字段时，我希望该字段显示它究竟是哪个（是1,2,3等）。问题是我无法抓住我点击按钮之前的标签。

Answer 1

您可以使用closest()而不是prevAll()来执行此操作，如下所示：

var increment=0;
$('a.add').click(function() {
  increment++;

  $(this).prev('.input_holder').clone().insertBefore(this).closest('.input_holder').find('label').text(increment);

  return false;
});

见工作demo

<强>更新
这是一个新版本，它在每个.input_holder上放置一个属性来保持其增量：

$('a.add').click(function() {

   prevholder = $(this).prev('.input_holder');
   increment = prevholder.attr('data-increment');
   increment++;
   prevholder.attr('data-increment', increment);
   prevholder.clone().insertBefore(this).closest('.input_holder').find('label').text(increment);

   return false;
});

见工作demo

Answer 2

请参阅：http://jsfiddle.net/GpT2x/

$('a.add').click(function() {
  var val = $(this).prev('.input_holder').find('label:last').text();
  val = val == "Some Label" ? 1 : (parseInt(val) + 1);
     $(this).prev('.input_holder').clone().insertBefore(this).closest('.input_holder').find('label').text(val);

  return false;
});

Answer 3

我会将输入块封装到另一个div中。这使您有机会编写一些更简单的JavaScript代码。

HTML

<div class="main_holder">
  <div class="block_holder">
    <div class="input_holder">
      <label for="something">Some Label</label>
      <br/>
      <input type="text" maxlength="255" class="cat_textbox" id="field_input"
      name="somename" />
    </div> <a href="#" class="add">Add+</a>

  </div>
  <div class="block_holder">
    <div class="input_holder">
      <label for="something">Some Label</label>
      <br/>
      <input type="text" maxlength="255" class="cat_textbox" id="field_input"
      name="somename" />
    </div> <a href="#" class="add">Add+</a>

  </div>
  <div class="block_holder">
    <div class="input_holder">
      <label for="something">Some Label</label>
      <br/>
      <input type="text" maxlength="255" class="cat_textbox" id="field_input"
      name="somename" />
    </div> <a href="#" class="add">Add+</a>

  </div>
</div>

JS

$(".main_holder").on("click", "a.add", function () {
    var count = $(this).closest(".block_holder").find("label").length;
    $(this).prev(".input_holder").clone().insertBefore($(this)).find("label").html(count);
    return false;
});

示例请参见此处：http://jsfiddle.net/StJwC/

顺便说一下，您应该区分输入字段的名称，并对有效的HTML代码使用不同的ID。

jquery更改所有以前标签的文本

3 个答案: