如何在jquery中獲取錨標記url哈希值？

Question

如何獲取此url錨標記哈希值？ 我正在嘗試此代碼，但這顯示未定義。

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不是jquery對象的屬性，而是HTMLAnchorElement （從Element類擴展的類）的屬性，因此您將得到undefined 。

因此，而不是創建使用jQuery對象$(this) ，你可以只使用引用的實際元素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

你真的不需要jquery， hash是錨點上的香草Js道具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

您只需選擇元素，然后檢查href包括# 。 如果包括用#拆分它並使用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>