Mise à jour d'un élément nextSibling

Question

J'ai essayé de faire fonctionner quelque chose avec JQuery. J'ai la fonction suivante:

<script type="text/javascript"> 
$(function(){ 
    // start a counter for new row IDs 
    // by setting it to the number 
    // of existing rows 
    var newRowNum = 2; 

    // bind a click event to the "Add" link 
    $('#addnew').click(function(){ 
     // increment the counter 
     newRowNum += 1; 

     // get the entire "Add" row -- 
     // "this" refers to the clicked element 
     // and "parent" moves the selection up 
     // to the parent node in the DOM 
     var addRow = $(this).parent().parent(); 

     // copy the entire row from the DOM 
     // with "clone" 
     var newRow = addRow.clone(); 

     // set the values of the inputs 
     // in the "Add" row to empty strings 
     //$('input', addRow).val(''); 
     //$('name', addRow).val('os' + newRowNum); 

     // replace the HTML for the "Add" link 
     // with the new row number 
     $('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient'); 

     // insert a remove link in the last cell 
     $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>'); 

     // loop through the inputs in the new row 
     // and update the ID and name attributes 
     $('td:first-child.next-child.input', newRow).each(function(i){ 
      var newID = newRowNum; 
      $(this).attr('id','os' + newID).attr('name','os' + newID); 
     }); 

     //$('td:first-child.next', newRow).html('<input type="text" id="os' + newRowNum + '" name="os' + newRowNum + '" value="">'); 

     // insert the new row into the table 
     // "before" the Add row 
     addRow.before(newRow); 

     // add the remove function to the new row 
     $('a.remove', newRow).click(function(){ 
      $(this).parent().parent().remove(); 
      return false;    
     }); 

     // prevent the default click 
     return false; 
    }); 
}); 
</script> 

Dans le html, je cette (partie d'un bloc de code plus):

<tr> 
    <td><input type="hidden" name="on2" value="Email Address 1"><a id="addnew" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" /></td> 
    <td>&nbsp;</td> 
</tr> 

Ce qui est censé se passer ici est que lorsque le lien Ajouter est cliqué, le bouton Ajouter est remplacé par le mot destinataire avec un élément de formulaire caché avec name = "on + newRowNum" (incrémenté de un pour chaque nouvelle ligne ajoutée) et le même pour id. Cela fonctionne très bien. Cependant, la deuxième partie de ceci dans le prochain, j'ai besoin de mettre à jour le nom et l'id de l'entrée de texte pour correspondre au newRowNum, dans ce cas name = "os + newRowNum" etc. Je ne suis pas capable de faire ceci. Je n'utilise probablement pas le formulaire approprié pour y accéder. J'ai essayé tout ce qui suit:

$('td:first-child.next-child.input', newRow).each(function(i){ 
    var newID = newRowNum; 
    $(this).attr('id','os' + newID).attr('name','os' + newID); 
}); 

$('td:firstChild.nextSibling.input', newRow).each(function(i){ 
    var newID = newRowNum; 
    $(this).attr('id','os' + newID).attr('name','os' + newID); 
}); 

plus beaucoup d'autres versions de ce qui précède. Est-ce que quelqu'un pourrait m'aider avec ceci? J'espère que ce n'est pas trop vague.

Answer 1

Ce sélecteur $('td:first-child.next-child.input', newRow) est un peu faux. Si tout ce que nous devons faire est d'obtenir les entrées dans la ligne que nous pourrions faire

$('input:hidden', newRow).attr('id','on' + newRowNum).attr('name','on' + newRowNum); 
$('input:text', newRow).attr('id','os' + newRowNum).attr('name','os' + newRowNum); 

Voici un Working Demo. Si vous voulez voir le code, ajoutez /éditez à l'URL.

BTW - Je pensais que vous vouliez dire something like this à l'origine jusqu'à ce que je relis votre question :)

Answer 2

Qu'en est-ce:

$(newRow:input:last).each(function(i){ 
    var newID = newRowNum; 
    var newOID = 'os' + newID; 
    $(this).attr('id',newOID).attr('name',newOID); 
}); 

NOTE: Je ne l'ai pas testé le rappel sur le attr afin que vous pourriez avoir besoin:

$(this).attr('id',newOID); 
$(this).attr('name',newOID); 

au lieu de

$(this).attr('id',newOID).attr('name',newOID);