[jQuery] Select Element - bessere Lösung?

[Dustin84]

Hey,

ich habe folgendes DOM:

<div class="box-menge">
 <input type="text" value="4" maxlength="3" name="menge_1" id="menge_1">
</div>
<div class="box-einzelpreis">
 <span class="einzelpreis">26,50</span> € <del class="striked">35,99 €</del>
</div>

Nun brauche ich den Einzelpreis, wenn ich die Menge anpasse.
Das habe ich so gelöst:

	$('.box-menge input').change(function() {
		var einzelpreis = $(this).parent().next().find("span.einzelpreis").html();
		alert(einzelpreis);
	});

Gibt es für das Selektieren des Einzelpreises eine bessere Lösung?
ich hätte gedacht dass es auch so gehen würde (tut es aber nicht):

var einzelpreis = $(this).next(".einzelpreis").html();

Gruß
D.

 

[Carrear]

Da einzelpreis eine Klasse ist nehme ich an, dass es mehrere Einzelpreise pro Seite gibt. Das zweite funktioniert nicht weil es auf ein .einzelpreis element bezogen ist, dass sich in .box-menge befinden würde, wenn ich mich nicht täusche. Was spricht denn gegen deine aktuelle Lösung?

 

[Quaese]

Hi,

wie @Carrear bereits erwähnt hat, wird dir nichts anderes übrig bleiben, als dich über die DOM-Struktur zum gewünschten Zielknoten zu hangeln.

Allerdings sollten hier Methoden verwendet werden, die unmittelbarer auf die Zwischenknoten verweisen. Dadurch ist es möglich, die Perfomanz zu erhöhen.
Z.B. kann auf höher liegende Elemente über die parent-Methode zugegriffen werden, auf direkte Kindelemente mit children. Dadurch werden nicht alle darüber- bzw. darunterliegenden Knoten durchsucht, sondern nur die in der vorherigen bzw. nachfolgenden Ebene gefundenen.

Weiterhin kennt das Input-Element kein change-Element. Du solltest hier besser onkeyup verwenden.

Ich würde dein Konstrukt wie folgt abbilden:

$('.box-menge input').on('keyup', function() {
  var einzelpreis = $(this).parent().next().children(".einzelpreis").html();
  console.debug(einzelpreis);
});

Ciao
Quaese