Блог

У меня есть вложенный неупорядоченный список, заполненный 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>
  

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

Я нажимаю на Северный Эттлборо и получаю: Корневая группа> Северо-восток США> Массачусетс> Северный Эттлборо

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

Вы можете начать с выбранного <a> элемента, использовать parents() для сопоставления <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'...
});
  

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

Вы можете получить все <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> «s.

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

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

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