how get anchor tag url hash values in jquery?

问题

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>

回答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>

回答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>

回答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>

来源：https://stackoverflow.com/questions/55085878/how-get-anchor-tag-url-hash-values-in-jquery

标签

javascript

jquery