jquery - 使用 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>

所以我点击纽约市，我得到:Root Group > 美国大西洋中部 > 纽约市

我点击 North Attleboro，我得到:根组 > 美国东北部 > 马萨诸塞州 > 北阿特尔伯勒

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

Answer 1

您可以从点击的<a>开始元素，使用parents()匹配 <ul>其祖先链中的元素，然后应用 prev()结果得到前面的<li>元素。

从那里，您可以使用 find()匹配 <a>列表项中的元素。如果你add()单击的超链接本身到结果集，您将拥有一个 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'...
});

您可以在 this fiddle 中测试它.