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，然后键向左或向右突出显示a元素

有什么建议吗？

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

Answer 1

如果你试图突出显示一个元素，那么你在DOM树中的深度太深，next无法正常工作。 next获得了下一个兄弟，而a则没有。

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

所以$next和$prev需要在DOM树上升几级以获得真正的下一个

因此，说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");
    }
});

fiddle here

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

1 个答案: