in der Nähe Geschwister in Javascript erhalten

9

Ich habe eine bestimmte DIV-Struktur mit einem Anker-Tag irgendwo dazwischen. Wenn ich auf den Link klicke, muss ich den Wert eines anderen span -Elements innerhalb des Elternteils div holen und etwas tun (sagen wir, warne es).

Das HTML ist wie folgt:

%Vor%

Die gesamte div wird mehrmals auf der Seite wiederholt. Wenn ich auf a klicke, möchte ich "This is reqd" melden.

Kann der HTML-Code so durchsucht werden?

    
Alessandro Vendruscolo 23.01.2013, 10:47
quelle

4 Antworten

3

Für ein einzelnes Spannweitenelement sollte es ziemlich einfach sein. Rufen Sie einfach eine myFunction (this) beim Klicken auf den Link auf und manipulieren Sie das DOM wie folgt:

%Vor%

Ich hoffe, das funktioniert. Es hat für mich getan !!

    
Riju Mahna 23.01.2013, 10:58
quelle
2

Da <span> nicht das direkte Geschwister dieses <a> ist, können wir .previousSibling oder .previousElementSibling nicht aufrufen. Die beste Lösung könnte sein, das übergeordnete Element abzurufen und nach dem <span>

abzufragen %Vor%

Demo : Ссылка

    
jAndy 23.01.2013 10:49
quelle
0

Verwenden von jQuery:

%Vor%     
Itisha-systematix 26.04.2017 10:25
quelle
0

Update: Lösungen mit und ohne jQuery

Diese Antwort hat so viele downvotes bekommen, um ein Beispiel mit jQuery zu zeigen, dass ich beschlossen habe, weitere Beispiele mit Vanilla-JavaScript hinzuzufügen, so dass jeder wählen kann, ob er jQuery verwenden möchte oder nicht.

Im Allgemeinen können Sie .previousSibling in Vanilla JavaScript verwenden, siehe:

und Sie können .prev() in jQuery verwenden, siehe:

Denken Sie jedoch daran, dass diese in komplizierteren Fällen möglicherweise nicht funktionieren, wenn Sie die genaue Struktur Ihres gesamten DOM nicht kennen.

Hier sind einige Beispiele, wie Sie dieses Ziel sowohl mit jQuery als auch mit Vanilla JavaScript erreichen, für einfache Fälle mit fester DOM-Struktur und für kompliziertere Fälle mit Klassen.

Ohne Klassen

Für die einfachsten DOM-Strukturen könnten Sie Event-Listener auf alle Links setzen und sich auf das implizite Wissen des DOM verlassen, aber das funktioniert möglicherweise nicht für komplexere Situationen - für diejenigen, die die Beispiele mit den Klassen unten sehen / p>

Mit jQuery:

%Vor%

Siehe DEMO .

Ohne jQuery:

%Vor%

Beachten Sie, dass previousSibling zweimal verwendet werden muss, da der leere Textknoten, der zwischen than span und link liegt, sonst verwendet würde.

Siehe DEMO .

Verwendung von Klassen

Wenn das span nicht direkt Ihrem a -Element vorangeht, können Sie es auch ein wenig anders machen, indem Sie auch einige Klassen hinzufügen, um sicherzustellen, dass Ihr Code keine anderen Links auf der Seite bricht :

Mit jQuery:

%Vor%

Siehe DEMO .

Ohne jQuery:

%Vor%

Siehe DEMO .

Der obige Code bindet Klickhandler an jedes a -Element mit der Klasse "link", das einen Text, der von seinem gleichgeordneten span -Element enthalten ist, mit einer Klasse "text" alarmiert. (Natürlich sollten die Klassennamen beschreibender sein als das.)

    
rsp 23.01.2013 10:55
quelle

Tags und Links