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?
3 Antworten
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/
$(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.
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();
});
Weitere Informationen finden Sie unter .first () und . nextAll ()