Jquery - Pourquoi est-ce que je modifie des éléments que je ne m'attends pas à modifier?

Question

J'ajoute dynamiquement des éléments de formulaire. Les éléments nouvellement ajoutés doivent avoir des attributs name distincts. Je fais cela en commençant par un formulaire de base, en saisissant un ensemble caché d'éléments de formulaire, en les clonant et en les ajoutant. Mon problème est que lorsque je vais définir l'attribut name des nouveaux éléments tous les éléments de formulaire sont modifiés pour l'attribut nouveau nom.

Ainsi, dans l'exemple ci-dessous le bit cloné fraîchement joint a l'attribut name correct mais pas les éléments existants, dans cet exemple, ils sont comme name="notabletitle1" mais après le clonage, ils ont tous le même attribut name (name="notabletitle2"). Pourquoi? Je pensais que cela ne changerait que les éléments que j'ajoute, pas les éléments existants.

Ma forme est comme:

<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> 

et mes js est comme:

$(".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; 
    }); 

la zone utilisée pour le clonage est comme:

<!-- 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

Ce morceau de code modifier tous éléments d'entrée, zone de texte et d'étiquette, pas seulement ceux que vous voulez:

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

Je n'ai pas analysé à fond votre code, mais je pense que vous voulez quelque chose comme ceci:

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

Cela changera seulement les éléments qui sont les enfants de la collection « n ».

Answer 2

Vous devez cloner votre cloneset avant de faire des modifications à ce sujet.

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');