使用 jQuery 缩短面包屑答案

【问题标题】：Shorten a breadcrumb with jQuery使用 jQuery 缩短面包屑
【发布时间】：2011-05-12 23:36:48
【问题描述】：

我的面包屑有以下代码：

<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

这会产生：“Home / Level1 / Level2 / Level3 / Level4 / Page”。我想使用 javascript/jQuery 将其缩短为“Home / Level1 [...] Page”，无论其他页面的数量如何，始终显示 Home、Level1 和页面。但我不知道如何抓住中间的东西。

只有在Level1以上才会触发，但是我从这里去哪里呢？

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

【问题讨论】：

标签： jquery jquery-selectors breadcrumbs

【解决方案1】：

试试这个有点复杂，但应该可以：

 <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>');
                }
            });

【讨论】：

这是在正确的轨道上，但恐怕我无法编辑 HTML 输出。它给了我一些想法......

【解决方案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>

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

【讨论】：

【解决方案3】：

这行得通，尽管不可否认它不是最漂亮的解决方案：

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);
    });
}

【讨论】：