縮短麪包屑與jQuery

Question

我有我的麪包屑下面的代碼：

<a name="top"></a> 
<a href="/index.html">Home</a>&nbsp;/&nbsp; 
<a href="../../../../index.html">Level1</a>&nbsp;/&nbsp; 
<a href="../../../index.html">Level2</a>&nbsp;/&nbsp; 
<a href="../../index.html">Level3</a>&nbsp;/&nbsp; 
<a href="../index.html">Level4</a>&nbsp;/&nbsp; 
Page 

主要生產：「家用/ 1級/級別2/3級別/級別4 /頁」。我希望使用javascript/jQuery將其縮短爲「Home/Level1 [頁面]」，無論其他頁面的數量如何，Home，Level1和頁面始終顯示。但我不確定如何抓住中間的東西。

下面只會觸發超過Level1的情況，但我該從哪裏出發？

if ($('#wayfinding a').length > 2) {} 

Answer 1

這工作，但無可否認它不是最漂亮的解決方案：

if ($('#wayfinding a').length > 3) { 
    var fullPath = $('#wayfinding').html(), breadcrumbs = fullPath, w = $('#wayfinding a').length; 
    for (i=0;i<=w-1;i++) { 
     breadcrumbs = breadcrumbs.replace('</a>','QQQQQ'); 
     if (i==1) { breadcrumbs = breadcrumbs.replace('</a>&nbsp;/&nbsp;','</a>&nbsp;/&nbsp;<span class="hiddenCrumbs">'); } 
     if (i==w-2) { breadcrumbs = breadcrumbs.replace('</a>','</a></span>'); } 
     if (i==w-1) { breadcrumbs = breadcrumbs.replace(/QQQQQ/g,'</a>'); } 
    } 
    $('#wayfinding').html(breadcrumbs); 
    $('.hiddenCrumbs').html('[...]').click(function() { 
     $('#wayfinding').html(fullPath); 
    }); 
} 

Answer 2

您可以添加選擇器或修改HTML嗎？包裝每個級別的麪包屑將使這更容易完成。

改變的HTML

<div id="wayfinding"> 
    <a name="top"></a> 
    <div class="level"><a href="/index.html">Home</a></div> 
    <div class="level"><a href="../../../../index.html">Level1</a>&nbsp;/&nbsp;</div> 
    <div class="level"><a href="../../../index.html">Level2</a>&nbsp;/&nbsp;</div> 
    <div class="level"><a href="../../index.html">Level3</a>&nbsp;/&nbsp;</div> 
    <div class="level"><a href="../index.html">Level4</a>&nbsp;/&nbsp;</div> 
    Page 
</div> 

JS

$('#wayfinding .level:not(:first)').remove(); 
$('#wayfinding .level:last').after('[...]'); 

Answer 3

試試這個有點複雜，但應該工作：

<style type="text/css"> 
    .breadcrums 
    { 
     width:500px; 
    } 
    .breadcrums li 
    { 
     list-style-type:none; 
     display:inline; 
    } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
     var length = $('.breadcrums li').length; 
     $('.breadcrums li').each(function(n){ 
       if(n > 2 && n!=length-1){ 
       $(this).hide(); 
       } 
      });   
     }); 
    </script> 

<ul class="breadcrums"> 
<li> <a name="top"></a></li> 
<li><a href="/index.html">Home</a>&nbsp;/&nbsp;</li> 
<li><a href="../../../../index.html">Level1</a>&nbsp;/&nbsp;</li> 
<li><a href="../../../index.html">Level2</a>&nbsp;/&nbsp;</li> 
<li><a href="../../index.html">Level3</a>&nbsp;/&nbsp;</li> 
<li><a href="../index.html">Level4</a>&nbsp;/&nbsp;</li> 
<li>Page</li> 
</ul> 

更新1： 主要原因附上鍊接li中的標記是隱藏/分隔符。沒有附上它，我不知道你將如何獲得該文本。

檢查這個版本適合您的需要：

<div class="wayfinding"> 
<a name="top"></a> 
<a href="/index.html">Home</a><span>&nbsp;/&nbsp;</span> 
<a href="../../../../index.html">Level1</a><span>&nbsp;/&nbsp;</span> 
<a href="../../../index.html">Level2 </a><span>&nbsp;/&nbsp;</span> 
<a href="../../index.html">Level3 </a><span>&nbsp;/&nbsp;</span> 
<a href="../index.html">Level4 </a><span>&nbsp;/&nbsp;</span> 
Page 
</div> 

var length = $('.wayfinding a').length; 
      $('.wayfinding a').each(function (n) { 
       if (n > 2 && n != length) { 
        $(this).next().hide(); 
        $(this).hide(); 
       } 
       if (n == 2) { 
        $(this).next().after('<span>[...]&nbsp;/&nbsp;</span>'); 
       } 
      });