Ways to shorten the anchor tag when there are more than two tags

I currently have the following code implemented on my webpage:

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>

The purpose of this code is to display the first and last anchor tags if there are more than two anchors, with clickable ellipsis in the middle.

For example, with more than 2 anchors, the expected output would be:

Demo1 > ... > Demo4

If there are only 2 anchor tags, the output should be:

Demo1 > Demo2
javascripthtmljquerycss

Answer №1

Follow this script to reach your objective:

let links = $("#menu-breadcrumb a");
  if (links.length > 2) {
    let mbcElement = $('<a class="mbc-link-back" href="#" data-menu-item-id="">...</a>');
    links.not(':first, :last').addClass('inactive');
    links.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>

To reveal hidden links by clicking on ..., include an event listener on mbcElement as shown below:

mbcElement.on('click', function(){
  $(this).hide()
  $("#menu-breadcrumb a.inactive").removeClass('inactive')
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring methods for monitoring page transitions in Next.js

Looking to repurpose a menu I created in react using react-router-dom for use in nextjs. My objective is to update the menu state to 'false' and change the menuName to 'menu' upon clicking on a link within the menu. Implemented a useEf ...

javascriptreactjsreact-hooksnext.jsnext-router

Center text within a div container

I am facing an issue with a nested div element: <div id="footer"> <div id="footer_text"> <p>My foooo text</p> </div> </div> The CSS code for the nested div is as ...

htmlcss

Input ENTER triggered JSON path loading

Upon clicking "enter", I am looking to display the description corresponding to the title. To achieve this, I have defined a variable to store the path of the description: var descri = json.query.results.channel.item.map(function (item) { return item. ...

javascriptjqueryajaxjson

Is there a way for me to determine which class has been selected using jQuery and JavaScript?

I created a list containing various links: <li class="link-1"><a href="#">One</a></li> <li class="link-2"><a href="#">Two</a></li> <li class="link-3"><a href="#">Three</a></li> .. Wh ...

javascriptjquery

Executing Python scripts asynchronously by pressing a button

I have a typical LAMP setup running on my Raspberry Pi. Within my HTML interface, I have indicators and buttons. Utilizing Jquery, I am able to pull data from server-side text files into the indicators, and intend to use buttons to manipulate these indica ...

jquerypythonajaxcgi

Is it possible to incorporate @font-face with Ruby on Rails?

I've been struggling to implement my custom font in a Rails project. The font files are located in app/assets/fonts/. I made changes to the CSS: # in app/assets/stylesheets/application.css @font-face { font-family: 'fontello'; src: u ...

cssruby-on-railsrubyfonts

Firefox smoothly shifts when a class is included

Take a look at If you click on one of the large brown rectangles, a jQuery script adds a "dropped" class which changes the top position. Surprisingly, this transition effect does not work in the latest version of Firefox, unlike in other browsers. I am pu ...

javascriptjqueryhtmlcssfirefox

The current page I'm working on is scrolling sideways, but I prefer a stationary layout without any scrolling

I am currently facing an issue with my webpage scrolling to the right. This behavior is not acceptable as web pages are not supposed to scroll to the right, correct? Could someone assist me in eliminating this unwanted scroll from my page? I have only u ...

htmlcss

The elements refuse to shift into their designated grid areas, although a few of them comply

https://i.sstatic.net/z2yC7.png Here is a visual representation of my current grid layout. I successfully changed the position of the picture with the pfp-div class, but I am encountering issues changing the text position with the profile-p-name-div class ...

htmlcsscss-grid

Is there an effective way to merge two collections?

I came across an issue where I am attempting to merge two arrays that resemble the ones listed below: var participants = [ {id: 1, name: "abe"}, {id:2, name:"joe"} ]; var results = [ ...

javascriptperformancenode.jsunderscore.jsasync.js

Guide on enabling the scrollbar within a text area while utilizing the pointer-events: none property

After applying the CSS rule pointer-events: none to the text area, I noticed that the scrollbar was disabled. I need the scrollbar to remain enabled so that users can scroll and view the entire content, while still preventing editing within the textarea u ...

htmlcsssassflexboxscss-mixins

Retrieve the index of the item that has been selected in a dropdown list

<select ng-click="getIndex($index)" size="14" ng-model="playlist.fileSelected" ng-options="saveFile for saveFile in playlist.playlist"></select> When I try to access $index, it shows up as undefined. Is there a way to retrieve the index of the ...

javascriptangularjs

Tips for minimizing excessive repetition in your for loops

I'm currently working on developing a Chess game and I've encountered an issue with code redundancy within my Bishop class. My goal is to create a function that can determine all possible moves of a bishop on the board. In order to achieve this, ...

javascriptdry

Setting element height dynamically using AJAX response in jQuery

I am facing an issue with a collapsed list that auto-expands on Ajax success. Even after the expansion, I am unable to retrieve the height of the expanded list. As Ajax dynamically adds elements to the list, the height keeps changing. Below is a simplif ...

javascriptjqueryajax

Content that moves with a flick of a finger

Seeking advice on a widely used JavaScript library that can facilitate scrolling for frequently updated content, similar to what popular websites like have implemented. I've had difficulty finding the right query on Google, so any recommendations or ...

javascriptjqueryajax

How can the each() method be utilized to apply addClass to all rows with matching row_ids?

Is it possible to use the each() method in JQuery to add a CSS class that highlights matching table rows, based on keys from a PHP array? I am new to JQuery and would appreciate some guidance or a code example. Here is an example of my table structure: & ...

jquery

Having trouble with my custom dropdown selector conflicting with Bootstrap 4 CSS

After searching for an alternative to the typical dropdown selectors, I stumbled upon a neat custom version on W3schools. However, I encountered an issue where it clashes with bootstrap. Despite including select: hide; in the CSS, the original dropdown sel ...

javascripthtmlcssbootstrap-4

Guide on incorporating a JS file in a React application

I recently obtained a template for my website that includes the following JS file which is being called from my React component. !(function($) { "use strict"; // Hero typed if ($('.typed').length) { var typed_strings = $(&quo ...

javascriptcssreactjsreact-nativenodes

Modify the color of the text for the initial letter appearing in the sentence

I am currently exploring the possibility of altering the font color of the initial instance of a letter in a div. For example, if the String were 'The text' and I desired to make the color of 'e' yellow, then only the first e would be i ...

htmlcssangularjs

Ways to prevent animations from displaying solely in IE

Is there a way to remove a keyframe animation if the browser is IE, while keeping it for Chrome, Safari, and FireFox? The animation I am referring to is defined as follows: // Animations @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } ...

css