Question

0

181

Views

How to get the anchor tag link and name using URL?

I have a URL

https://example.com/test/test1/test1_1/test1_2/

I am using the script below to get all the page names like breadcrumbs

 var current = location.pathname.slice(1).split('/').join(' > ');
//Output: test > test1 > test1_1 > test1_2 >

Is there a way I can get along with the anchor tag? I have to set the click event. I have tried the code below

var current = location.pathname.slice(1).split('/').join(' > ');


$('#nav_menu-2').prepend('<div id="menu-breadcrumb"></div>');
var menuBreadcrumb = document.getElementById('menu-breadcrumb');

$('#nav_menu-2 li a').each(function() {
  var $this = $('#nav_menu-2 li a');

  var thismenuLi = $($this).parent().attr('id');
  let thismenuText = $($this).text();

  var shortText = jQuery.trim(thismenuText).substring(0, 15)
    .split(" ").slice(0, -1).join(" ") + "...";


  let mbcElement = '<a class="mbc-link-back" href="#" data-menu-item-id="' + thismenuLi + '">' + shortText + '</a>'
  menuBreadcrumb.insertAdjacentHTML('beforeend', mbcElement);

});

<div class="secondary">
  <div id="menu-breadcrumb"></div>
  <nav class="nav" id="nav_menu-2">
    <ul id="menu-inner-page-menu" class="menu">
      <li id="menu-item-204" class="menu-item-has-children"><a href="#">Test</a>
        <ul class="sub-menu">
          <li id="menu-item-304" class="menu-item-has-children"><a href="#">Test 1</a>
            <ul class="sub-menu">
              <li id="menu-item-401" class="menu-item-has-children"><a href="#">Test 1.2</a>
                <ul class="sub-menu">
                  <li><a href="#link">Test 1.2.1</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

about 4 years ago · Juan Pablo Isaza

Answer question

0

181

How to get the anchor tag link and name using URL?

Find remote jobs

Andres GPT