как получить хэш-значения URL-адреса тега привязки в jquery?

#javascript #jquery

Вопрос:

Как получить хэш-значения этого тега привязки url? я пытаюсь использовать этот код, но он показывает 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 это не свойство объекта 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>

Ответ №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>

Ответ №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>