phpjqueryajaxbreadcrumbsjquery-bbq

Codeigniter, Jquery, want to show breadcrumbs


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>

Solution

  • 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