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

Question

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/

Answer 1

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