简体   繁体   English

jQuery从列表结构构建面包屑导航链接

[英]jQuery build breadcrumb nav links from list structure

i have been modifying a snippet found on jsfiddle that creates breadcrumb links from an html ul nav structure: 我一直在修改jsfiddle上的一个片段,该片段从html ul导航结构创建面包屑链接:

working example: http://jsfiddle.net/pseudorad10/WpRMd/3/ 工作示例: http : //jsfiddle.net/pseudorad10/WpRMd/3/

trying to get working example: http://jsfiddle.net/pseudorad10/GeRhW/1/ 尝试获取工作示例: http : //jsfiddle.net/pseudorad10/GeRhW/1/

i'm attempting to port the functionality of the first example to the second. 我正在尝试将第一个示例的功能移植到第二个示例。 jQuery builds the "crumbs path" by moving through the html structure relative to its origin, which is initially set by finding the navigation link's url and giving it a 'current' class. jQuery通过相对于其原始位置遍历html结构来构建“碎片路径”,该结构最初是通过查找导航链接的url并为其提供“当前”类来设置的。 Additional anchor elements that are 'in the path' are also given the 'current' class. “在路径中”的其他锚元素也被赋予“当前”类。

This identifies the breadcrumb elements and works well in the first example... 这可以识别面包屑元素,并且在第一个示例中效果很好。

var crumbs = $(".current").parents("ul")
.prev("li").find("a").add(".current")

but fails on the second example as the html structure is somewhat different. 但是第二个示例失败了,因为html结构有些不同。 I've modified it to no avail and cannot seem to find a way to reference the correct elements to build the path. 我已经对其进行了修改,但无济于事,似乎无法找到一种方法来引用正确的元素来构建路径。

many advance thanks... 非常感谢...

According to bellatrix's comment , the answer is to add: 根据bellatrix的评论 ,答案是添加:

 var crumbs = $(".current").parents("ul").prev("a").add(".current") 

A working demo can be found here: jsfiddle 可以在这里找到有效的演示: jsfiddle

A more elegant solution would probably be to build an array using parentsUntil() and is() , and then join(' > ') to make the final HTML. 一个更优雅的解决方案可能是使用parentsUntil()is()构建一个数组,然后使用join(' > ')生成最终的HTML。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM