jQuery3.3.1で開いているURLからActiveクラスを付加させたい

Question

Bootstrap4を使用していて、必然的にjQuery3.3.1を入れているのですがその状態で現在のページを取得し、li要素にactiveクラスを追加したいです。
いろいろ調べて下記のコードまで辿り着いてエラーはなくなったのですが動作せず困っています。
何が間違っているのかご教授願います。
参考URL：https://teratail.com/questions/51918

<div id="navbars" class="collapse navbar-collapse">
  <ul id="nav" class="navbar-nav ml-auto">
    <li class="nav-item"><a class="nav-link" href="xxx.html">リンク</a></li>
    <li class="nav-item"><a class="nav-link" href="xxx.html">リンク</a></li>
    <li class="nav-item"><a class="nav-link" href="xxx.html">リンク</a></li>
  </ul>
</div>

$(window).on('load', function(){
	$('#nav').find('a').each(function() {
		if (location.pathname == $(this).attr('href')) {
			$(this).parent('li').addClass('active');
		}
	});
});

Answer 1

とりあえずこれで十分

$(function(){
  $('#nav a[href="'+location.pathname+'"]').closest('li').addClass('active');
});

location.pathnameの値をよく精査したほうがよいでしょう

Comments

[misonya]

わかりやすい回答ありがとうございます！

Answer 2

おそらく、条件文の中身で取得している location.pathname が、 a 要素にある href 属性とマッチしていないことが原因だと思います。

location.pathname を適当に加工するなどして、現在のページまでのパスを除去してから比較するなどの方法で修正できると思います。

(補足)
location.pathname はURL のパス部分を表すので、例えばこのページ（ https://terateil.com/questions/153620）なら、 /questions/153620 が格納されています。

例えばこの場合に <a href="153620">にマッチさせたいなら、

if(location.pathname == $(this).attr('href')){
  ...
}

の部分を、

if(location.pathname == '/questions/'+ $(this).attr('href')){
  ...
}

とする必要があります。

Comments

[misonya]

location.pathnameをよく理解もせず書いていたのが間違いでした。
指摘と補足で理解できました！ありがとうございます

Answer 3

href属性ではなくhrefプロパティを見たほうがいいでしょう。

        if (location.href === $(this).prop('href')) {
            $(this).parent('li').addClass('active');
        }

https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/href