I want show breadcrumbs in my site.. I have used jquery bbq in my website.
and i tried to implement the breadcrumbs like in my site.
My BreadCrumbs View File includes:
<ul class="breadcrumb">
</ul>
in the script of bbq i tried like this,
var url = $.param.fragment();
var breadcrumb=$('.breadcrumb');
var BreadCrumbBar ='<li><a href="#">PBS</a><span class="divider">></span></li>';
var BreadCrumbsSplit = url.split('/');
breadcrumb.empty();
breadcrumb=BreadCrumbBar;
$.each(BreadCrumbsSplit,function(breadurl){
breadcrumb.append('<li><a href="#'+BreadCrumbsSplit[breadurl]+'"></a></li>\n');
});
Here is what i am trying to do, but cant quite figure out, how to implement it?
First i am getting Error in FireBug that .append
is not a function,
Second, in .each()
loop i want to add this line too <span class="divider">/</span>
in <li><a href="#'+BreadCrumbsSplit[breadurl]+'"></a></li>
What it will do, it will add /
between breadcrumbs, but i don't want this /
within the last <li></li>
tags..
Can anyone help me in this regard, that how to achieve it?
Simply in the End Result i want code generated some thing like this
<li><a href="#">PBS</a> <span class="divider">/</span></li>
<li><a href="#home">Home</a> <span class="divider">/</span></li>
<li><a href="#library">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
var url = $.param.fragment();
var breadcrumb=$('.breadcrumb');
var BreadCrumbBar ='<li><a href="#">PBS</a><span class="divider">></span></li>';
var BreadCrumbsSplit = url.split('/');
var total = BreadCrumbsSplit.length;
breadcrumb.empty();
breadcrumb=BreadCrumbBar;
$.each(BreadCrumbsSplit,function(index){
if(index !== total-1){
breadcrumb.append('<li><a href="#'+BreadCrumbsSplit[index]+'"></a><span class="divider">/</span></li>\n');
}else{
breadcrumb.append('<li><a href="#'+BreadCrumbsSplit[index]+'"></a></li>\n');
}
});
sry not tested, but it should work.. :) added number of total elements, and if last element dont insert divider, if there is llmistake you can fix it easily