jQuery need help to navigate/highligt elements on a complex list

this is my hmtl list.

<div class="bradius3 taggy-beans">
    <div class="taggy-beans-search"><input type="text" id="search-tags" class="bradiusMax" style=""></div>
    <div class="pajinate-content">
    <ul class="pajinate">
    <li class="page1" style="display: inline;">
    <ul class="filtered-tags">
    <li><a id="4e72858ccaa47ca608510000" class="bradiusMax bean" href="javascript:void(0)">hey</a>
    </li>
    </ul>
    </li>
    <li class="page1" style="display: inline;">
    <ul class="filtered-tags">
    <li>
    <a id="4e72858ccaa47ca6082d0000" class="bradiusMax bean" href="javascript:void(0)">hi</a>
    </li>
    </ul>
    </li>
    <li class="page1" style="display: inline;">
    <ul class="filtered-tags">
    <li>
    <a id="4e72858ccaa47ca6082d0000" class="bradiusMax bean" href="javascript:void(0)">jhon</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </div>

my js script.

    $('#search-tags').live('keydown',function(e){
 var $prev, $next, $current = $(".pajinate a.highlight");

    if (e.which === 40 && !$current.length) {
        $(".pajinate a:first").addClass("highlight");
    } else if (e.which === 39) {
        console.log($next);
        $next = $current.next(".pajinate a");
        if ($next.length) {
            $current.removeClass("highlight");
            $next.addClass("highlight");
        }

    } else if (e.which === 37) {
        console.log($prev);
        $prev = $current.prev(".pajinate a");
        if ($prev.length) {
            $current.removeClass("highlight");
            $prev.addClass("highlight");
        }
    } else if (e.which === 38) {
        $(".pajinate a").removeClass("highlight");
    }
});

what i'm trying to do is to navigate by e.keyCode in the html list above, trying highlighting a.bean elements but the script highlights only the first a.开发者_开发知识库bean, then key left or right doesn't highlights a elements

any suggest?

here is an example of the script logic: http://jsfiddle.net/WeNdW/

---

if you're trying to highlight a elements, you would be too deep in the DOM tree for next to work properly. next gets the next sibling, and a doesn't have any.

a is highlighted and is set to be $current

so $next and $prev need to go a few levels up the DOM tree in order to get to the true next a

Thus, the part that says parent().parent().parent() to go the appropriate amount up the DOM structure. Similarly, children().children().children() to go back down and highlight the a.

$("#search-tags").live("keydown", function(e) {
    var $prev, $next, $current = $(".pajinate a.highlight");

    if (e.which === 40 && !$current.length) {
        $(".pajinate li:first a").addClass("highlight");
    } else if (e.which === 39) {
        $next = $current.parent().parent().parent().next("li");
        if ($next.length) {
            $current.removeClass("highlight");
            $next.children('ul').children('li').children('a').addClass("highlight");
        }

    } else if (e.which === 37) {
        $prev = $current.parent().parent().parent().prev("li");
        if ($prev.length) {
            $current.removeClass("highlight");
            $prev.children('ul').children('li').children('a').addClass("highlight");
        }
    } else if (e.which === 38) {
        $(".pajinate a.highlight").removeClass("highlight");
    }
});

fiddle here