zwischen verschiedenen DIVs "durchsteppen"?

[Stefan]

Hallo zusammen,

ich habe ein Konstrukt aus mehreren DIVs in denen wiederum x-DIVs sind.
Nun will ich per Keyboard zwischen den einzelnen "unter"-DIVs durchsteppen (hoch/runter).

Das ist so weit kein Problem, nur schaffe ich es einfach nicht von einem "über"-Div in das nächste zu kommen.

mein HTML Code, hier variert aber die Anzahl der "UnterDIVs":

  
<div id="resultBox">  
 <div id="result0">  
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
 </div>  
 <div id="result1">  
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
 </div>  
 <div id="result2">  
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
 </div>  
 <div id="result3">  
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
 </div>  
</div>  

Der JS-Code, hier rufe ich die "change"-Funktion mit der Variable ("up"/"down") auf und dort soll immer die Klasse "selected" auf das nächste Item übergeben werden.:

  
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");  
    }  

das funktioniert so weit, nur leider nicht von einer "result"-Gruppe zur Nächsten...

wer kann mir hier evtl helfen?
Wichtig wäre auch noch das erste und letzte Item zu selektieren, bzw vom letzten auf das erste zu blättern und andersrum.

DANKE im Voraus.
P.S. ich versuche jetzt seit mind 10h meinen Fehler, bzw die Lösung zu finden, stehe aber total auf dem "Schlauch".

[1UnitedPower]

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.

[Stefan]

@1UnitedPower:
WOW!! Danke!
Das hat mit alles schon sehr geholfen!
Der Event Handler ist natürlich registriert, sorry habe ich vergessen zu schreiben!

Danke!

Hast Du oder jemand anders hier einen Tipp, wie ich dann auf die verschiedenen Eltern-Knoten "Switchen" könnte?

Gruß Stefan!

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.

[ichbinich]

Hallo,

Hast Du oder jemand anders hier einen Tipp, wie ich dann auf die verschiedenen Eltern-Knoten "Switchen" könnte?

Ja, mit einem anderen Selektor und Speicherung der Position (dabei gleich überlegen, ob du deinen Code nicht anders organisieren möchtest)

var idx=-1;  
function focus(dir) {  
	$('#resultBox div.selected').removeClass('selected');  
	if(dir == 'up') {  
		idx = idx>0 ? idx-1 : idx;  
	}  
	else if(dir == 'down') {  
		idx = idx<$('#resultBox div.item').length-1 ? idx+1 : idx;  
	}  
	$('#resultBox div.item:eq(' + idx + ')').addClass('selected');  
}  

vg ichbinich

[suit]

P.S. ich versuche jetzt seit mind 10h meinen Fehler, bzw die Lösung zu finden, stehe aber total auf dem "Schlauch".

Du gehst sehr inflationär mit "e" um

e ist jetzt das custom event und später die element-Referenz - entscheide dich :)

aber mal losgelöst davon:

e = $("#resultBox div.selected")  
$("#resultBox div.selected").removeClass("selected");  
e.next("#resultBox div.selected").addClass("selected");

Du hast hier in der 3. Zeile einen offensichtlichen Logikfehler - der Selektor in next() kann unmöglich zutreffen von du zuvor selected von allen Elementen enfernst, auf die dieser zutrifft.

Was du willst ist das nächste div-Element finden, welches ein direkter Nachfahre von #resultBox ist