переключение элемента по событию
 

Здравствуйте.
Есть блок в нем список элементов с одинаковым классом.
при нажатии на стрелочку вверх вниз происходить должен выбор элемента из списка... как это реализовать ?
Вот код оброботки нажатой клавиши
$(function(){

$('#inputString').keypress(function(event){

if (event.keyCode == '40'){
сдесь обработка спанов
}

});
});
решать не надо, подскажите куда копать

выделяет только второй и предпоследний спаны...
вот код

$(document).ready(function(){
$('#inputString').keypress(function(event){



var $items = $('.category');
var active = 0;

// ...

if (event.keyCode == 40 || event.keyCode == 38) {
$items.eq(active).removeClass('active');
var step = {40: 1, 38: -1}[event.keyCode];
// циркулирующий инкремент/декремент
active = ($items.length + step) % $items.length;
$items.eq(active).addClass('active');
}


});
});

Как вариант, использовать
http://jquery-docs.ru/Traversing/next/#expr
и
http://jquery-docs.ru/Traversing/prev/#expr
От текущего с классом active...

Плюс отработка если уже на первом... И если на последнем...

как запомнить тот элемент к которому обратился в первый раз функцией?
function(){
$('#searchresults').first('span').next(); его как то надо запомнить и передать этот элемент в следующий вызов как это сделать????


return this;
}
иммено структуру не могу создать(

$items и active нужно объявить выше, вне функции keypress

из за переноса $items и active функция не работает ... сам селектор var $items = $('.category') - создается через ajax после ввода 3 букв(это диномический поисковик базы данных) та проблему которую мы решаем это переходы по результатам.... если он создается этот список после того как мы ввели 3 буквы каков синтаксис $items и active ?

сам блок результатов иммеет структуру
<div id ="searchresults" >
<span class="category"> </span>
<span class="category"> </span>
<span class="category"> </span>
<span class="category"> </span>
<span class="category"> </span>
<span class="category"> </span>
<span class="category"> </span>


</div>

Ну так сделай активным первый элемент... А кейпрес будет работать уже с тем, что есть...

$(function(){




var $items = $('.category');
var active = 0;
$('#searchresults').first('span').attr('class', 'active');

$('#inputString').keypress(function(event){





if (event.keyCode == 40 || event.keyCode == 38) {
$items.eq(active).removeClass('active');
var step = {40: 1, 38: -1}[event.keyCode];
// циркулирующий инкремент/декремент
active = ($items.length + step) % $items.length;
$items.eq(active).addClass('active');
}


});
});
так ?