ナビゲーションの現在位置にクラスを付与してデザインを加えたい。

Question

EC-CUBEサイトを構築しているjavascript初心者です。

下記コードの現在の表示させているページに　class=active を付与してデザインを加えたいです。

<div class="header__nav">
  <div class="header__menu">
    <a class="header__menu-home" href="{{ url('homepage') }}"><img src="{{ asset('sample/dest/img/cmn_home_icon.svg') }}"></a>
    <a class="header__menu-item"href="{{ url('product_list') }}">商品一覧</a>
    <a class="header__menu-item"href="{{ url(eccube_config.eccube_user_data_route, {"route": "guide"}) }}">ご利用ガイド</a>
    <a class="header__menu-item"href="">制作事例</a>
    <a class="header__menu-item"href="">テンプレート</a>
    <a class="header__menu-item"href="">入稿ガイド</a>
    <a class="header__menu-item" href=""><img src="{{ asset('airkan/dest/img/cmn_upload_icon.svg') }}" >データ入稿</a>
  </div>
</div>

例えば「商品一覧」のURLは下記のようになります。
http://localhost:XXXX/eccube/products/list

URL末尾の/で区切らる部分の値が同じ時にclass=activeを付与しようと、(「商品一覧ページの場合は/list」)
ネットで拾ってきたコードを元に以下のようにしました。

$(document).ready(function() {
    var activeUrl = location.pathname.split("/")[3];
      navList = $(".header__menu").find("a");
 
    navList.each(function(){
        if( $(this).attr("href").split("/")[3] == activeUrl ) {
         $(this).addClass("active");
       };
  });
});

しかし表示しているページにクラスが付与されません。。。。。
どこがおかしいのかご教授ください。

Answer 1

$(document).ready(function() {
var activeUrl = location.pathname.split("/")[2];
navList = $(".header__menu-item");

navList.each(function(){
    if( $(this).attr("href").split("/")[4] == activeUrl ) {
     $(this).addClass("active");
   };

});
});

とすることで意図した動きが実現できました。