[英]how get anchor tag url hash values in jquery?
How to get this url anchor tag hash values? 如何获取此url锚标记哈希值? i am trying this code but this shows undefined. 我正在尝试此代码,但这显示未定义。
HTML & Jquery 3.2: 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>
.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
. .hash
不是jquery对象的属性,而是HTMLAnchorElement (从Element类扩展的类)的属性,因此您将得到undefined
。
So, instead of creating a jQuery object using $(this)
, you can reference the actual element by just using this
: 因此,而不是创建使用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>
You don't really need jquery, hash
is a vanilla Js prop on anchors https://www.w3schools.com/jsref/prop_anchor_hash.asp 你真的不需要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>
You can simply select the elements and than check for href
includes #
or not. 您只需选择元素,然后检查href
包括#
。 if includes split it with #
and get the value using pop
如果包括用#
拆分它并使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.