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

我有一个由ajax填充的嵌套无序列表，我正在寻找创建面包屑式导航。最终的结果应该是我点击列表中的任何节点，父列表项显示在面包屑导航中。使用jQuery将嵌套无序列表转换为面包屑

<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

有没有一种方法可以使用jQuery遍历构建此路径？

来源

2011-10-21 saranicole

您可以从点击<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中测试它。

来源

2011-10-21 21:40:07

这是完美的 - 我不想引入任何不必要的标记，这找到确切的集合，而不依赖于.node类两种。谢谢！ – saranicole

你可以用下面的代码的点击<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); 
});

此找到所有方兴未艾<li>的<ul>标签被点击，通过他们的迭代，选择从文本非.node<li>'s。

这里是输出，你可以使用你的breadcrums一个数组的jsfiddle：http://jsfiddle.net/rE9x8/1/

来源

2011-10-21 21:22:18 Jasper

我只是粗略地导航结构：

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

来源

2011-10-21 22:10:18

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

回答

相关问题