使用 jQuery 将嵌套无序列表转换为面包屑

Question

我有一个由 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>

所以我点击纽约市，我得到： 根组>美国大西洋中部>纽约市

我点击 North Attleboro，我得到： 根组>美国东北部>马萨诸塞州> North Attleboro

有没有办法使用 jQuery 遍历来构建这条路径？

Answer 1

您可以从单击的 元素开始，使用 parents() 匹配其祖先链中的

元素，然后应用 prev() 到结果中获得紧邻
• 元素之前。

从那里，您可以使用 find() 来匹配 列表项中的元素。如果您add()将单击的超链接本身添加到结果集中，您将拥有一个包含所有内容的 jQuery 对象路径中的超链接，按正确的顺序。

现在您只需使用 map() 从 构建内部文本值数组 元素，以及 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'...
});

您可以在 this fiddle 中测试它。

Answer 2

您可以使用以下代码获取单击的

的所有

上升元素：

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

这会找到所有上升元素

被单击的

的 code> 标签，迭代它们，从非 .node 中选择文本

的。

这是一个 jsfiddle，它输出一个可用于面包屑的数组： http://jsfiddle.net/rE9x8/1 /

Answer 3

我只是粗略地浏览了结构：

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