Блог

У меня есть следующий код для моих хлебных крошек:

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

Который выдает: «Главная страница / Level1 / Level2 / Level3 / Level4 / Страница». Я хочу использовать javascript / jQuery, чтобы сократить его до «Home / Level1 […] Page», где всегда будут отображаться Home, Level1 и Страница, независимо от количества других страниц. Но я не уверен, как захватить промежуточный материал.

Следующее сработает, только если уровень больше 1, но что мне делать дальше?

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

Попробуйте это немного сложно, но должно сработать:

  <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 amp;amp; n!=length-1){
                $(this).hide();
                }
            });        
        });
    </script>

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

Обновление 1:
Основная причина, по которой тег ссылки должен быть заключен в li, заключается в том, чтобы скрыть разделитель / . Не прилагая его, я не уверен, как вы могли бы получить доступ к этому тексту.

Проверьте, соответствует ли эта версия вашим потребностям:

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

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

Можете ли вы добавить селекторы или вообще изменить 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>amp;nbsp;/amp;nbsp;</div>
    <div class="level"><a href="../../../index.html">Level2</a>amp;nbsp;/amp;nbsp;</div>
    <div class="level"><a href="../../index.html">Level3</a>amp;nbsp;/amp;nbsp;</div>
    <div class="level"><a href="../index.html">Level4</a>amp;nbsp;/amp;nbsp;</div>
    Page
</div>
  

JS

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

Это работает, хотя, по общему признанию, это не самое привлекательное решение:

 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>amp;nbsp;/amp;nbsp;','</a>amp;nbsp;/amp;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);
    });
}