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

这段代码将更改所有输入，textarea和标签元素，而不仅仅是您想要的那些：

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”的子元素。

Answer 2

您应该在对其进行修改之前克隆您的cloneset：

n = $("#cloneset1").clone().children();
      n.each(function(){
            $('input').attr("name", nam+"title"+c);
            $('textarea').attr("name", nam+"text"+c);
            $('label').attr("for", nam+"link"+c);
      })
      n.appendTo('#meh');

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

2 个答案: