create two list and navigate through it using key board and on enter key press the list item should be popped from one list to another and vice versa

Question

eg : "like this but this is using mouse click. if it was using key press it would be great thank u." here is the code: demo

$(".ingredient").click(function(){
   var element = $(this);
   var added = false;
   var targetList = $(this).parent().siblings(".ingredientList")[0];
   $(this).fadeOut("fast", function(){
     $(".ingredient", targetList).each(function(){
       if ($(this).text() > $(element).text()){
          $(element).insertBefore($(this)).fadeIn("fast");
          added = true; return false; 
        } 
     });
     if(!added) $(element).appendTo($(targetList)).fadeIn("fast");
   });
});

---

Answer 1

See this : http://jsfiddle.net/Nhv8n/

Not perfect but its almost there...

var li = $('li');
var liSelected;
$(window).keydown(function (e) {
if (e.which === 40) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.next();
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.eq(0).addClass('selected');
  }
} else {
  liSelected = li.eq(0).addClass('selected');
}
  } else if (e.which === 38) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.prev();
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.last().addClass('selected');
  }
} else {
  liSelected = li.last().addClass('selected');
}
} else if (e.which === 39) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.parent().next('ol').find('li:first');
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.last().addClass('selected');
  }
} else {
  liSelected = li.last().addClass('selected');
}
  } else if (e.which === 37) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.parent().prev('ol').find('li:first');
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.last().addClass('selected');
  }
} else {
  liSelected = li.last().addClass('selected');
}
}
  else if (e.which === 13) {
  var $el = $(".ingredient.selected"); //.removeClass('selected')
  var added = false;
  var targetList = $el.parent().siblings(".ingredientList")[0];
  $el.fadeOut("fast", function () {
  $(".ingredient", targetList).each(function () {
    if ($el.text() > $el.text()) {
      $el.insertBefore($el).fadeIn("fast");
      added = true;
      return false;
    }
  });
  if (!added) $el.appendTo($(targetList)).fadeIn("fast");
});
}
});