Ich habe diesen Code:Javascript berechnen Gesamt
Wenn ich eine Tabelle hinzu: http://jsfiddle.net/VAkLn/7/ diese aufhören zu arbeiten. Warum?
Gelöst:
ich ändern, um diese: Preis = self.next ("Preis "), To: Preis = $ (". Preis"),
Der Grund, warum Ihr erstes Beispiel funktioniert, ist, dass tr und td Elemente nur in einem table Element gültig sind. Der Browser Streifen effektiv diese ungültigen Tags im DOM aus, die Sie mit einer Struktur ähnlich läßt:
<body>
<input type="input" size="3" class="qta">
<input type="input" size="7" class="price">
TOTALE: <input type="input" id="total" size="7" ;="">
</body>
es in Firebug oder Webkit Inspector Check out.
Der Selektor next() funktioniert hier, weil input.price das unmittelbar folgende gleichgeordnete Element jedes Elements in der Menge der übereinstimmenden Elemente ist.
Sobald Sie ein Einwickeln table Elemente umfassen, die tr und td Elemente gültig in der Struktur und in dem DOM gestellt bekommen, wie man erwarten würde:
<body>
<table width="520" border="0" align="center" cellpadding="3" cellspacing="0">
<tbody>
<tr>
<td width="40" bgcolor="#009966" class="whyte">
<input type="input" size="3" class="qta">
</td>
<td width="100" bgcolor="#009966" class="whyte">
<input type="input" size="7" class="price">
</td>
</tr>
</tbody>
</table>
TOTALE: <input type="input" id="total" size="7" ;="">
</body>
Diese den next() Selektor brechen, weil input.price ist nicht mehr das unmittelbar folgende Geschwister jedes Elements in der Menge der übereinstimmenden Elemente.
Die Lösung ist Ihre jQuery-Selektor ändern für input.price die neue Struktur zu navigieren:
price = self.parents('tr').find(".price"),
Ihre fiddle aktualisiert.
Die .next() selector funktioniert nur für Geschwister im aktuellen Element. Nicht sicher, warum es in Ihrem ersten Beispiel funktionierte ...
Ich verzweigte Ihre Geige (http://jsfiddle.net/vansimke/n3W4F/) und fügte einige Navigation hinzu, um zum übergeordneten Tag zu gehen, zum nächsten zu gehen und dann das ".price" -Element zu finden Innerhalb. Sehen Sie, ob es das tut, was Sie wollen.
Die nächste Funktion betrachtet nur die unmittelbar folgenden Geschwister. Da jede Eingabe in einem td-Tag umschließen wird, haben sie keine unmittelbaren Geschwister, so die
self.next(".price")
Wähler nichts zurückgibt. Man könnte so etwas wie
self.parents('tr').find(".price").
Ich bin nicht so sicher, warum der erste Schnipsel funktioniert verwenden. Wenn Sie die Eltern der Eigenvariablen untersuchen (self.parents(). Foreach (...)), sind die Eltern HTML -> BODY -> INPUT. Ich vermute, dass, weil die TR/TD nicht in einem TABLE-Element eingeschlossen sind, die Eingabe-Tags stattdessen Kinder von BODY werden? Jemand anderes könnte eine bessere Erklärung für dieses Verhalten haben.
Wahr, danke !! – Geme