Umbenennung Attribut name in <input> in verschiedenen Tabellen

Question

JSFiddle hier: http://jsfiddle.net/pceh73g8/

In meinem Skript, ich werde Tabellen zu laden, die die gleichen sein werden. Die folgende ist mein Beispiel:

<table class="table"> 
<tr><td>First Name</td><td><input name="firstname" type="text"></td></tr> 
<tr><td>Last Name</td><td><input name="lastname" type="text"></td></tr> 
</table> 

<table class="table"> 
<tr><td>First Name</td><td><input name="firstname" type="text"></td></tr> 
<tr><td>Last Name</td><td><input name="lastname" type="text"></td></tr>  
</table> 

Ich möchte ein Skript schreiben, indem Index die Namen umbenennen. Schließlich sollte die Ausgabe wie folgt sein:

<table class="table"> 
<tr><td>First Name</td><td><input name="firstname1" type="text"></td></tr> 
<tr><td>Last Name</td><td><input name="lastname1" type="text"></td></tr> 
</table> 


<table class="table"> 
<tr><td>First Name</td><td><input name="firstname2" type="text"></td></tr> 
<tr><td>Last Name</td><td><input name="lastname2" type="text"></td></tr>  
</table> 

Ich habe versucht() zu verwenden .each durch jeden Tisch zu gehen, und die Indexnummer jeder Tabelle bekommen (auf der Rückseite der Eingangsnamen anhängen) .

Ich bin unsicher, wie Sie innerhalb jeder der Tabellen auswählen. Ich schien stattdessen alle Eingänge auszuwählen. Wie wählen wir die "Kinder" jeder Tabelle aus, die Felder sind, und benennen sie entsprechend dem Index um?

$(".table").each(function(){ 
    //Get current index of the table 
    var i = $(this).index(); 

    $(":input").each(function(){ 
     var oldname = $(this).attr('name'); 
     $(this).attr('name',oldname+i); 
    }); 

}); 

Answer 1

Das liegt daran, dass Sie eine nicht-kontextspezifische $(':input') Selektor für jede Iteration verwendet wird, so dass alle Eingabeelemente werden nur den Index des letzten <table> Element erhalten. Verwenden Sie stattdessen $(this) und DOM transversal Methoden.

Auch kommt .each() mit einem nullbasierten Index i, so dass man eigentlich ist es nicht neu deklariert in der Funktion müssen :) jedoch beachten, dass, da es Null -Basis (dh bei Null beginnt, und nicht eins), du musst 1 hinzufügen (also wirst du firstname1 anstelle von firstname0 für das erste Auftreten eines Eingabeelements zum Beispiel haben).

$(".table").each(function(i){ 
    $(this).find(":input").each(function(){ 
     var oldname = $(this).attr('name'); 
     $(this).attr('name',oldname+(i+1)); 
    });  
}); 

Siehe Geige hier festgelegt: http://jsfiddle.net/teddyrised/pceh73g8/4/

---

Per @dsfq's answer, können Sie auch die Vorteile nehmen Sie die .attr() Methode zu verwenden, die Funktionen übernimmt. Ich lerne immer noch jeden Tag etwas Neues hier;)

Answer 2

Nur eine Zählvariable halten und erhöhen es

var i = 0; 
$('.table').each(function(){ 
    i++; // increment 
    $(this).find('[name=firstname]').attr("name", function(_, n){ return n + i; }); 
    $(this).find('[name=lastname]').attr("name", function(_, n){ return n + i; }); 
}); 

Answer 3

Eine Lösung hinzufügen this ist auf den zweiten each (der zweite Parameter den Kontext, in dem bietet suchen die Element durch den ersten Selektor abgestimmt):

$(".rename").click(function() { 
    $(".table").each(function() { 
     var i = $(this).index(); 
     $(":input", this).each(function() { //add this 
      var oldname = $(this).attr('name'); 
      $(this).attr('name', oldname + i); 
     }); 
    }); 
}); 

fiddle

Answer 4

Finden Eingabeelemente withi n jede Tabelle mit find Methode:

$(".table").each(function() { 
    var i = $(this).index(); 
    $(this).find(":input").attr('name', function (ind, oldname) { 
     return oldname + i; 
    }); 
}); 

Sie können auch attr Methode als Setter statt each Schleife verwenden.

Auch $(this).find(":input") entspricht $(":input", this), wenn Sie es mehr mögen.