javascript - Jquery - 为什么我要更改我不希望更改的元素？

Question

我正在动态附加表单元素。新添加的元素需要具有不同的 name 属性。我这样做是从一个基本表单开始，获取一组隐藏的表单元素，克隆它们并附加它们。我的问题是，当我设置新元素的名称属性时，所有 表单元素都更改为新的名称属性。

因此在下面的示例中，新附加的克隆位具有正确的 name 属性但不是现有元素，在本示例中它们类似于 name="notabletitle1" 但是克隆后，它们都具有相同的名称属性 (name="notabletitle2")。为什么？我认为这只会改变我添加的元素，而不是现有的元素。

我的表格是这样的:

<form>
<fieldset id="meh">
          <legend>Notable</legend>
          <p class="title">
              <input  name="notabletitle1" type="text" />
              <label for="notabletitle1">Title</label>
          </p>
          <p class="text">
              <textarea class="thin markItUp" name="notabletext1"></textarea>
          </p>
          <p class="link">
              <input  name="notablelink1" type="text" />
              <label for="notablelink1">Link</label>
          </p>
          <a class="new" href="#">[ + ]</a>
</fieldset>
</form>

我的 js 是这样的:

  $(".new").click(function() {
    c = ($(this).parent().children("p").length)/3+1;
      nam = $(this).parent().children("legend").text().toLowerCase();
      n = $("#cloneset1").children();
      n.each(function(){
            $('input').attr("name", nam+"title"+c);
            $('textarea').attr("name", nam+"text"+c);
            $('label').attr("for", nam+"link"+c);
      })
      n.clone().appendTo('#meh');

      return false;
    });

用于克隆的区域如下:

  <!-- Title, Text, Link set for cloning -->
  <div style="display:none" id="cloneset1">
      <p class="title">
            <input  name="" type="text" />
            <label for="">Title</label>
        </p>
        <p class="text">
            <textarea class="thin markItUp" name=""></textarea>
        </p>
        <p class="link">
            <input  name="" type="text" />
            <label for="">Link</label>
        </p>
  </div>
  <!-- end clone set -->

Answer 1

这段代码将更改所有 input、textarea 和label 元素，而不仅仅是您想要的:

n.each(function(){
        $('input').attr("name", nam+"title"+c);
        $('textarea').attr("name", nam+"text"+c);
        $('label').attr("for", nam+"link"+c);
  })

我还没有彻底分析你的代码，但我想你想要这样的东西:

n.each(function(){
        $('input',this).attr("name", nam+"title"+c);
        $('textarea',this).attr("name", nam+"text"+c);
        $('label',this).attr("for", nam+"link"+c);
  })

这只会改变集合“n”的子元素。