jquery Tastendruck durch jede Schleife iterieren?

Question

Hey Jungs, wahrscheinlich eine einfache Frage, konnte jedoch nichts online finden.

Ich habe eine Liste mit Suchergebnissen, und ich möchte in der Lage sein, mit meinen Auf- und Ab-Tasten durch die Liste zu navigieren.

if (e.keyCode == 40) { //down 
     //alert('down'); 
     $('#searchresults ul li').each(function() { 

     }); 
    } 

    if (e.keyCode == 38) { //up 
     //alert('up'); 
    } 

    if (e.keyCode == 13) { //enter 
     //alert('enter'); 
    } 

die Ihrem Suchergebnis wie folgt aussehen:

<ul> 
    <li class="matched"><a href="link1">link1</a></li> 
    <li class="matched"><a href="link2">link2</a></li> 
    <li class="matched"><a href="link3">link3</a></li> 
</ul> 

Also im Grunde möchte ich nur in der Lage sein, durch meine Suchergebnis mit den nach oben und unten Tasten zu navigieren. die Auswahl des aktuellen Elements sollte vielleicht nur die Hintergrundfarbe ändern und wenn ich die Eingabetaste drücke, wird das verlinkte und das gematchte Element ausgelöst.

eine Idee, wie ich durch die searchresults iterieren kann? danke

edit:

var pressedCount = 0; 

if (e.keyCode == 40) { //down 
    console.log(pressedCount); 
    $('#searchresults ul li').index(pressedCount).addClass('selected'); 
    pressedCount++; 
} 

nicht funktioniert, weil ich mit der Index-Methode falsch, etwas zu tun habe. Der Parameter pressedCount var wird jedoch bei jedem arrowkeydown-Trigger erhöht.

Answer 1

Arbeits Demo:http://jsfiddle.net/zBjrS/1/

(Sie haben die Seite zuerst klicken, um die IFRAME zu konzentrieren.)

Answer 2

Nicht sicher, dass ich wirklich die Idee mag, einen Benutzer Pfeiltasten zu übernehmen, besonders wenn wir in einer Welt leben, dass Seite hoch/runter nicht mehr auf vielen Tastaturen (Notebooks) vorhanden ist. Es gibt viele Benutzer, die Pfeile zum Scrollen verwenden.

Wenn Sie in den Ergebnissen auf dem Tastaturnav eingestellt sind, legen Sie den Fokus auf den ersten Link, dann wird Tab nach unten und Shift + Tab wird nach oben gehen.

All diese Funktionalität bereits in Sie gebaut haben nur den Fokus auf das erste Element setzen

$('first_element_selector').focus();

Answer 3

so etwas wie dies funktionieren sollte

if (e.keyCode == 40) { //down 
    $('#searchresults ul li').each(function() { 
     if ($(this).hasClass('selected')) { 
      $(this).removeClass('selected'); 
      $(this).next().addClass('selected'); 
      // use $(this).prev() for UP case 
     } 
    }); 
} 

Notiz, die Sie benötigen würde vorzuladen die Liste mit einer 'ausgewählten' CSS-Klasse oder fügen Sie einen Code hinzu, um die ausgewählte auf das erste Element in der Liste anzuwenden, wenn keine ausgewählt wurde

auch Sie Code, um zu überprüfen, ob Sie sich auf das letzte Element in der Liste enthalten sind, werden Sie nicht .next() in diesem Fall

jQuery nächste http://api.jquery.com/next/

jQuery zurück http://api.jquery.com/prev/

anrufen möchten

jQuery hasClass http://api.jquery.com/hasClass/

jQuery removeClass http://api.jquery.com/removeClass/