jQuery 需要帮助来导航/突出显示复杂列表上的元素

Question

这是我的 hmtl 列表。

<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>

我的js脚本。

    $('#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");
    }
});

我想做的是通过上面的 html 列表中的 e.keyCode 进行导航，尝试突出显示 a.bean 元素，但脚本仅突出显示第一个 a.bean，然后左键或右键不会突出显示

任何建议的 元素？

这是脚本逻辑的示例： http://jsfiddle.net/WeNdW/

Answer 1

如果您尝试突出显示某个元素，则您在 DOM 树中的位置太深，next 无法正常工作。 next 获取下一个同级，而 a 没有。

a 被突出显示并设置为 $current，

因此 $next 和 $prev 需要在 DOM 树上向上移动几层才能到达真正的下一个 a

因此，表示 parent().parent().parent() 的部分将在 DOM 结构中向上移动适当的数量。同样，children().children().children() 返回并突出显示 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");
    }
});

在这里摆弄