jQueryでカレントナビを実現する際、同じURLが2つ以上存在すると最初にのみアクティブクラスが付与されてしまう

Question

前提・実現したいこと

jQuery(3.4.1)でカレントナビ表示を実現させたいのですが、href属性が同じaタグが2つ以上ある場合、最初のaタグのみにクラスが付与されてしまいます。

最初だけでなく、href属性が同じaタグの全てにクラスを付与したいのですが、
どのように書けばいいのでしょうか。

現状使わせていただいているコードは以下から拝借しました。
https://blog.looseknot.jp/html/globalnavi_current.html

よろしくお願いいたします。

該当のソースコード

$(function() {
  var url = location.pathname;
  var url_dir_length = url.split('/').length;
  var url_file_name = url.split('/')[url_dir_length];
  var url_dir_name = url.split('/')[url_dir_length - 1];
  var navi = $("#nav a");

  navi.each(function(){
    var href = $(this).attr("href");
    var href_dir_length= $(this).attr("href").split('/').length;
    if (url_dir_length == href_dir_length) {
      if (url_dir_name == '') {
        var href_dir_name = href.split('/')[href_dir_length - 1];
        var href_page_name = href.split('/')[href_dir_length];
        if ((url_file_name == href_page_name) || (url_file_name=='' && href_page_name=='index.html')) {
          $(this).addClass("is-current");
          return false;
        }
    } else {
        var href_dir_name = href.split('/')[href_dir_length - 1];
        if (url_dir_name == href_dir_name) {
          $(this).addClass("is-current");
          return false;
        }
      }
    }
  });
});

<nav>
  <ul id="nav">
    <li>
      <a href="/">index</a>
    </li>
    <li>
      <a href="/about.html">about</a>
    </li>
    <li>
      <a href="/contact.html">contact</a>
    </li>
    <li>
      <p><a href="/works-1.html">works</a> //ここが同一URL
      <ul>
        <li>
          <a href="/works-1.html">works-1</a> //ここが同一URL
        </li>
        <li>
          <a href="/works-2.html">works-2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

navi.eachのなかで、条件に一致したらreturn false;している箇所があります。
なので最初にそこを通ったら、navi.eachの処理を抜けてしまっているからです。

Comments

[mamemam]

おっしゃる通りreturn falseが原因でした！
ずっと悩んでたのでとてもすっきりです！
ありがとうございました！

Answer 2

おそらくやりたいことは、.prop()を使えば実現できるんじゃないかなと思います。
.attr()では、純粋に「属性における値」が取得され、.prop()では、「プロパティの値」が取得されます。

  navi.each(function(){
    if($(this).prop("href") == location.href) {
      $(this).addClass("is-current");
    }
  });

Comments

[mamemam]

ご回答ありがとうございます！
なるほど、こういう書き方もあるのですね！！
勉強になりました。ありがとうございます！