How do you type up and down arrows to highlight items in a list? (Jquery)

Question

I have a stack of <DIV> siblings, and I want the user to use the up and down arrows to move up and down the list and "highlight" the element. Only one item should be selected at any given time.

What is the easiest way to do this?

Answer 1

 $(document).keyup(function(e) { var $hlight = $('div.hlight'), $div = $('div'); if (e.keyCode == 40) { $hlight.removeClass('hlight').next().addClass('hlight'); if ($hlight.next().length == 0) { $div.eq(0).addClass('hlight') } } else if (e.keyCode === 38) { $hlight.removeClass('hlight').prev().addClass('hlight'); if ($hlight.prev().length == 0) { $div.eq(-1).addClass('hlight') } } }) 

Check out the working example http://jsfiddle.net/wMdML/8/

Answer 2

OK ...

 var highlight = function(upOrDown){ var highlighted = $("#daddyDiv > div.higlighted"); if(highlighted[0] == null){ //If nothing is highlighted, highlight the first child $("#daddyDiv > div:first").addClass("highlighted"); } else { //Highlight the next thing if(upOrDown == "down" && highlighted.index() != $("#daddyDiv > div").length()){ $("#daddyDiv > div").eq(highlighted.index()+1).addClass("highlighted"); $("#daddyDiv > div.higlighted").removeClass("highlighted"); } else if(upOrDown == "up" && highlighted.index() != 1){ $("#daddyDiv > div").eq(highlighted.index()-1).addClass("highlighted"); $("#daddyDiv > div.higlighted").removeClass("highlighted"); } } }; //Assuming you are using up/down buttons... $("#upButton").click(function(){ highlight("up"); }); $("#downButton").click(function(){ highlight("down"); }); //Using the arrow keys... $("body").keyup(function(e){ if(e.keyCode == "40"){ //Down key highlight("down"); } else if(e.keyCode == "38"){ //Up key highlight("down"); } }); 

Answer 3

I did this: http://jsfiddle.net/JPy76/ .

It basically removes the selected class when moving up / down and adds it to the next / previous. Some additional code is needed to move down after the last / move up after the first.

 $('body').keydown(function(e) { if(e.keyCode === 40) { if($('.highlighted').next().length) { $('.highlighted').removeClass('highlighted') .next().addClass('highlighted'); } else { $('.highlighted').removeClass('highlighted'); var d = $('div'); d.length = 1; d.addClass('highlighted'); } } if(e.keyCode === 38) { if($('.highlighted').prev().length) { $('.highlighted').removeClass('highlighted') .prev().addClass('highlighted'); } else { $('.highlighted').removeClass('highlighted'); var d = $('div'); d = $(d[d.length - 1]); d.addClass('highlighted'); } } }); 

Answer 4

Here is one way to do this without using identifiers or classes. A working working jsfiddle example is available here (first click on the results pane).

javascript:

 var $currentDiv = $("#myContainer").children().first(); $currentDiv.css("background", "red"); $("html").keyup( function(keyEvent) { if (keyEvent.keyCode == 40 ) { var $nextDiv; if ($currentDiv.next().size() == 0) { $nextDiv = $("#myContainer").children().first(); } else { $nextDiv = $currentDiv.next(); } $currentDiv.css("background", ""); $nextDiv.css("background", "red"); console.log($nextDiv); console.log($currentDiv); $currentDiv = $nextDiv; } else if (keyEvent.keyCode == 38) { var $previousDiv; if ($currentDiv.prev().size() == 0) $previousDiv = $("#myContainer").children().last(); else { $previousDiv = $currentDiv.prev(); } $currentDiv.css("background", ""); $previousDiv.css("background", "red"); $currentDiv = $previousDiv; } }); 

html:

 <div id="myContainer"> <div> Div 1 </div> <div> Div 2 </div> <div> Div 3 </div> <div> Div 4 </div> </div>