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>

所以我点击纽约市，我得到：根组＆gt;美国中西部地区＆gt;纽约市

我点击北阿特尔伯勒，我得到：根组＆gt;美国东北部＆gt;马萨诸塞州＆gt;北阿特尔伯勒

有没有办法使用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中进行测试。

Answer 2

您可以使用以下代码获取所点击的<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/

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

使用jQuery将嵌套的无序列表转换为Breadcrumbs

3 个答案: