Build the page <title> from Bootstrap breadcrumb with jQuery

Question

I have this Bootstrap snippet:

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

I'd like to use it to dinamically build the page <title>, so I basically need to:

1. remove all the HTML and keep only text
2. add a " / " (or any other separator) for each item except the last

It should appear as:

Home / Library / Data

I'm almost there, but I'm stuck with this fiddle (I replaced <title> with a <p>, but the idea is the same): http://jsfiddle.net/G447V/

I don't know why, the separator is added also to the .breadcrumb in the page (where slashes are CSS-generated)... And I don't know how toi say "add a slash to each, but not the last"
Please, any help?
Thanks in advance!

Answer 1

$( "title" ).text(function(){
    var i = 0,
        text = '';
    $( ".breadcrumb li" ).each(function() {
        if (i != 0) {
            text += ' / ';
        }
        text += $(this).text();
        i++;
    });

    return text;
});