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

這段代碼將更改全部輸入，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');