Ich lerne jQuery, wie Sie meinen letzten Fragen entnehmen können. Jetzt versuche ich, ein wirklich großes statisches HTML ein bisschen navigierbarer zu machen.

Ein Teil des HTML:

<a class="entryheader">...</a><br /><br />
<div class="entrycontent">...<br />
<p class="entryfoot">...</p>

<a class="entryheader">...</a><br /><br />
<div class="entrycontent">...<br />
<p class="entryfoot">...</p>

Mein JS:

$("a.entryheader").click(function(){
 alert("clicked");
 $(this).next("div.entrycontent").show();
});

Der Eintragsinhalt ist standardmäßig ausgeblendet und sollte nur sichtbar sein, wenn der Benutzer auf den Eintragsheader klickt.

Wenn ich auf entryheader klicke, wird das Meldungsfeld angezeigt, aber der Eintragsinhalt bleibt unsichtbar.

Ich habe verschiedene Ansätze für $ (this) .next ausprobiert, aber keiner hat funktioniert.

Wahrscheinlich fehlt mir das Verständnis des DOM-Modells. Welche Tools und Dokumentationen empfehlen Sie?

-1
vbd 16 Okt. 2012 im 15:40

3 Antworten

Beste Antwort

Das Problem ist, dass next() nach dem nächsten Element im HTML sucht. In Ihrem Fall verwenden Sie eine Reihe von BR Tags als Trennzeichen, sodass next() ein BR ist.

Verwenden Sie am besten den Code, den Sie haben, und entfernen Sie die BR -Tags. Verwenden Sie CSS, um den Rand für die Trennung anzuwenden.

Wenn Sie die BR -Tags beibehalten, können Sie die index() -Methode verwenden

$("a.entryheader").click(function(){
     var index=$("a.entryheader").index(this)
     $("div.entrycontent").eq(index).show();
});

DEMO mit Index http://jsfiddle.net/fUeZE/

4
charlietfl 16 Okt. 2012 im 11:48

$(this).next('div.entrycontent') wählt in Ihrem Fall nichts aus, da das nächste Geschwister nach dem Ankertag das <br /> -Tag ist. Ich würde die <br /> -Tags entfernen und dem Ankertag einen Rand am unteren Rand hinzufügen, um den gleichen Effekt zu erzielen, und dann funktioniert Ihr .next -Code oben.

0
amurra 16 Okt. 2012 im 11:50

Die andere Möglichkeit, mit Ihrem Code das zu erreichen, was Sie wollen, besteht darin, die nextAll() Traversal-Methode von jQuery zu verwenden, um alle nächsten Elemente mit einer Klasse von .entrycontent abzugleichen, und dann nur nach der ersten zu filtern, die so gefunden wurde.

$("a.entryheader").click(function(){ 
    $(this).nextAll('div.entrycontent').first().show();
}); 

DEMO

Weitere Informationen finden Sie unter .first () und . nextAll ()

2
Mark Walters 16 Okt. 2012 im 14:17