Используйте jQuery для конвертации вложенных неупорядоченных списков в хлебные крошки - PullRequest
Новая
       13

Используйте jQuery для конвертации вложенных неупорядоченных списков в хлебные крошки

2 голосов
/ 22 октября 2011

У меня есть вложенный неупорядоченный список, заполненный ajax, и я пытаюсь создать из него навигацию в стиле крошки. Конечный результат должен состоять в том, что я нажимаю на любой узел в списке, и элементы родительского списка отображаются в навигационной системе. 

<div id="list">
    <ul>
        <li class="expanded">
            <a href="#" id="1122">Root Group</a>
        </li>
        <ul>
            <li class="expanded">
                <a href="#" id="1126">Northeast US</a>
            </li>
            <ul>
                <li class="collapsed">
                    <a href="#" id="1127">Massachusetts</a>
                </li>
                <ul style="display: none; ">
                    <li class="expanded node">
                        <a href="#" id="1128">Mansfield-Foxboro</a>
                    </li>
                    <li class="expanded node">
                        <a href="#" id="1129">North Attleboro</a>
                    </li>
                </ul>
                <li class="expanded">
                    <a href="#" id="1144">New Hampshire</a>
                </li>
                <ul>
                    <li class="expanded node">
                        <a href="#" id="1145">Manchester</a>
                    </li>
                </ul>
            </ul>
            <li class="expanded">
                <a href="#" id="1181">Mid-Atlantic US</a>
            </li>
            <ul>
                <li class="expanded">
                    <a href="#" id="1182">New York City</a>
                </li>
                <ul>
                    <li class="expanded node">
                        <a href="#" id="1183">Time Square</a>
                    </li>
                </ul>
            </ul>
        </ul>
    </ul>
</div>

Итак, я нажимаю на Нью-Йорк и получаю: Root Group> Средняя Атлантика США> Нью-Йорк

Я нажимаю на North Attleboro и получаю: Root Group> Северо-восток США> Массачусетс> Север Эттлборо

Есть ли способ построить этот путь с помощью обхода jQuery?

Ответы [ 3 ]

2 голосов
/ 22 октября 2011

Вы можете начать с выбранного элемента <a>, использовать parent () , чтобы сопоставить элементы <ul> в его цепочке предков, затем применить prev () к результату. получить непосредственно предшествующие элементы <li>.

Оттуда вы можете использовать find () , чтобы сопоставить элементы <a> в элементах списка. Если вы добавите () гиперссылку, по которой щелкнули сами, к набору результатов, у вас будет объект jQuery, содержащий все гиперссылки в пути в правильном порядке.

Теперь вам нужно всего лишь использовать map () для создания массива внутренних текстовых значений из элементов <a> вместе с Array.join () для объединения пути строка. Конечный результат выглядит примерно так: 

$("a").click(function() {
    var path = $(this).parents("ul").prev("li").find("a").add(this)
        .map(function() {
            return $(this).text();
        }).get().join(" > ");

    // Do something with 'path'...
});

Вы можете проверить это в этой скрипке .

0 голосов
/ 22 октября 2011

Я просто грубо перемещался по структуре: 

$('a').click(function(e){
    e.preventDefault();
    for (var current = $(this),string = [];current.parent().parent().parent().attr('id') != 'list';current = current.parent().parent().prev().children('a'))
        string.push(current.text());
    string.push(current.text());
    alert(string.reverse().join('>'));
});
0 голосов
/ 22 октября 2011

Вы можете получить все <li> потомки нажатых <li> со следующим кодом: 

$('li').bind('click', function () {
    var $ascendants = $(this).parents('ul'),
        output      = [];
    $.each($ascendants, function (index, value) {
        output.push($(value).children('li').not('.node').children('a:first').text());
    });
    //output is not an array of all the text within parent li tags of the clicked li tag
    console.log(output);
});

Находит все теги <ul> асцендента <li>, по которым щелкнули, перебирает их, выбирая текст из не .node <li>.

Вот jsfiddle, который выводит массив, который вы можете использовать для своих хлебных крошек: http://jsfiddle.net/rE9x8/1/

...