JQuery нужна помощь для навигации / выделения элементов в сложном списке - PullRequest
Новая
       14

JQuery нужна помощь для навигации / выделения элементов в сложном списке

0 голосов
/ 28 сентября 2011

это мой список 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");
    }
});

то, что я пытаюсь сделать, это перемещаться по e.keyCode в приведенном выше списке html, пытаясь выделить элементы a.bean, но скрипт выделяет только первое a.bean, затем клавиша влево или вправо не выделяет элементы

есть предложения?

Вот пример логики скрипта: http://jsfiddle.net/WeNdW/

1 Ответ

1 голос
/ 28 сентября 2011

если вы пытаетесь выделить элементы, вы слишком глубоко погрузитесь в дерево 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");
    }
});

скрипка здесь

...