CODEWITHSUNDEEP
javascriptjquerynavigationhtml-listsbreadcrumbs
bellatrix
bellatrix

Reputation: 21

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:

working example: http://jsfiddle.net/pseudorad10/WpRMd/3/

trying to get working example: 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. 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. 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...

Upvotes: 2

Views: 3300

Answers (1)

Dan Blows
Dan Blows

Reputation: 21184

According to bellatrix's comment, the answer is to add:

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

A working demo can be found here: jsfiddle

A more elegant solution would probably be to build an array using parentsUntil() and is(), and then join(' > ') to make the final HTML.

Upvotes: 1

Related Questions