Tengo el siguiente código en mi página.
var menuBreadcrumb = document.getElementById('menu-breadcrumb'); var counta = $("#menu-breadcrumb a").length; //alert(counta); if (counta >= 2) { let mbcElement = '<a class="mbc-link-back" href="#" data-menu-item-id="">...</a>'; menuBreadcrumb.insertAdjacentHTML('beforeend', mbcElement); } .mbc-link-back { color: #0066cc; text-decoration: none; } #menu-breadcrumb a+a::before { color: #222; content: '>'; cursor: default; padding: 0 3px; } <div id="menu-breadcrumb"> <a href="">Demo 1</a> <a href="">Demo 2</a> <a href="">Demo 3</a> <a href="">Demo 4</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Lo que estoy haciendo es, si la etiqueta de anchor es más de 2, entonces tengo que mostrar la first y la last etiqueta de anclaje y en el medio, tengo que mostrar ... con clic.
A partir de ahora, tengo más de 2 etiquetas de anclaje, por lo que mi salida esperada es
Demo1 > ... > Demo4Si tengo 2 etiquetas de anclaje, entonces tengo que mostrar
Demo1 > Demo2Puede usar este script para lograr su objetivo:
let anchors = $("#menu-breadcrumb a"); if (anchors.length > 2) { let mbcElement = $('<a class="mbc-link-back" href="#" data-menu-item-id="">...</a>'); anchors.not(':first, :last').addClass('inactive'); anchors.first().after(mbcElement) } .mbc-link-back { color: #0066cc; text-decoration: none; } .mbc-link-back { color: #0066cc; text-decoration: none; } #menu-breadcrumb a+a::before { color: #222; content: '>'; cursor: default; padding: 0 3px; } #menu-breadcrumb .inactive { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="menu-breadcrumb"> <a href="">Demo 1</a> <a href="">Demo 2</a> <a href="">Demo 3</a> <a href="">Demo 4</a> </div>Si desea mostrar enlaces ocultos haciendo clic en ... puede agregar un detector de eventos en mbcElement de esta manera:
mbcElement.on('click', function(){ $(this).hide() $("#menu-breadcrumb a.inactive").removeClass('inactive') })