ich habe ein Konstrukt aus mehreren DIVs in denen wiederum x-DIVs sind.
Benutze besser semantisches HTML.
Nun will ich per Keyboard zwischen den einzelnen "unter"-DIVs durchsteppen (hoch/runter).
Dann solltest du auch irgendwo einen Event-Handler registrieren.
function focus(e){
length = $("#resultBox div.item:visible").length;
if(e == "up"){
e = $("#resultBox div.selected"); //das aktuell selektierte auswählen
$("#resultBox div.selected").removeClass("selected");
e.prev("#resultBox div.selected").addClass("selected");
}
else if (e == "down"){
e = $("#resultBox div.selected"); //das aktuell selektierte auswählen
$("#resultBox div.selected").removeClass("selected");
e.next("#resultBox div.selected").addClass("selected");
}
Du überschreibst einfach den Parameter `e`{:.language-javascript} mit einem jQuery-Objekt. Das verursacht bei deinem Code aktuell zwar keine Seiteneffekte, dient aber auch nicht unbedingt der Übersicht.
`length`{:.language-javascript} sollte außerdem nicht global sein. Mal davon abgesehen, dass du die Variable sowieso nicht benutzt.
Die ersten beiden Zeilen aus dem "if"- und "else"-Block sind außerdem identisch und könnten problemlos vor der Verzweigung ausgeführt werden.
> `e.prev("#resultBox div.selected").addClass("selected");`{:.language-javascript}
Hier selektierst du das vorige Geschwister-Element, das bereits die Klasse "selected" hat. Bei deiner Aufgabenstellung könntest du übrigens direkt auf den Selektor verzichten.
Zusammengefasst:
~~~javascript
function focus(e){
var $selected = $("#resultBox div.selected");
$selected.removeClass("selected");
if(e == "up"){
$selected.prev().addClass("selected");
}
else if (e == "down"){
$selected.next().addClass("selected");
}
}
Das waren bisher einige Verbesserungsvorschläge. Der eigentliche Fehler ist aber, dass next, bzw. prev nur direkte Geschwister-Elemente nicht auswählen, nicht aber Elemente die zwar, die selbe Verschachtelungstiefe mit unterschiedlichen Eltern-Knoten haben.