how get anchor tag url hash values in jquery?

Question

How to get this url anchor tag hash values? i am trying this code but this shows undefined.

HTML & Jquery 3.2:

 $(function(){ // get current url hash values. var current = window.location.hash; $('#navbarSupportedContent ul li a').each(function(){ var $this = $(this); alert($this.hash); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="index.php">Home</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="index.php#aboutus">About Us</a> </li> <ul> </div> 

Answer 1

.hash isn't a property of a jquery object , but rather is a property of an HTMLAnchorElement (a class which extends from the Element class), thus you're getting undefined .

So, instead of creating a jQuery object using $(this) , you can reference the actual element by just using this :

 $(function() { // get current url hash values. var current = window.location.hash; $('#navbarSupportedContent ul li a').each(function() { alert(this.hash); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="index.php">Home </a> </li> <li class="nav-item"> <a class="nav-link" href="index.php#aboutus">About Us</a> </li> </ul> </div> 

Answer 2

You don't really need jquery, hash is a vanilla Js prop on anchors https://www.w3schools.com/jsref/prop_anchor_hash.asp

 $(function() { // get current url hash values. var current = window.location.hash; $('#navbarSupportedContent ul li a').each(function() { alert(this.hash); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="index.php">Home </a> </li> <li class="nav-item"> <a class="nav-link" href="index.php#aboutus">About Us</a> </li> </ul> </div> 

Answer 3

You can simply select the elements and than check for href includes # or not. if includes split it with # and get the value using pop

 function getMeHash(){ let anchors = document.querySelectorAll('#navbarSupportedContent ul li a') let hashes = [] anchors.forEach(e=>{ if(e.href.includes('#')){ hashes.push(e.href.split('#').pop()) } }) console.log(hashes) } 

 <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="index.php">Home</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="index.php#aboutus">About Us</a> </li> <ul> </div> <button onclick='getMeHash()'>Get me hash </button>