JavaScript if文が分岐しません

前提・実現したいこと

JavaScriptで、グローバルナビの表示の出し分けを行いたい。
(現在地へのリンクにclass="active"が追加される)

発生している問題

login.htmlアクセス時、JavaScriptのif文で複数の分岐に入ってしまう。
console.logでどこの分岐に入ってしまっているか確認すると、
「c」「a」と表示され、2つの分岐に入っていることが確認できる。
(index.html、regist.html表示時は問題ありません。)

上記の「実現したいこと」自体は実現できているのですが、
(下記「試したこと」参照)
if文で複数の分岐に入ってしまう原因を知りたく、質問させていただきました。
よろしくお願いいたします。

該当のソースコード

JavaScript
1$(function() {
2    //グローバルナビのクラス変更
3    $('.global_nav').find('a').each(function() {
4        if (location.pathname != '/') {
5            if (location.pathname === $(this).attr('href')) {
6                $(this).parent('li').addClass('active');
7                console.log('a');
8            } else if (location.pathname.indexOf('regist') > -1) {
9                $('#regist').addClass('active');
10                console.log('b');
11            } else {
12                $('#index').addClass('active');
13                console.log('c');
14            }
15        } else {
16            $('#index').addClass('active');
17            console.log('d');
18        }
19    });
20
21});

html
1<ul class="global_nav">
2    <li id="index">
3        <a href="index.html">トップ</a>
4    </li>
5    <li id="regist">
6        <a href="/regist.html">会員登録</a>
7    </li>
8    <li id="login">
9        <a href="/login.html">ログイン</a>
10    </li>
11</ul>

試したこと

・キャッシュの削除・ページのリロード→変わらず
・console.log('c')に至る分岐を削除→「a」としか表示されないため、「b」「d」に至る分岐には入っていないようです。
・console.log('a')に入る分岐を下記のコードに変更→「c」に至る分岐に入らなくなりました。(想定している動きになりました)

JavaScript
1if (location.pathname.indexOf('login') > -1) {
2    $('#login').addClass('active');
3    console.log('a');

行動規範の内容に同意します

回答2件

ベストアンサー

以下のコードはクラス：global_navという要素を探してきて、
更にその要素の子要素のうちa要素を取得してくるという意味です。

javascript
1$('.global_nav').find('a')

つまり、以下の3要素全てを取得しています。

そして、each関数はそれぞれに対して、処理を行う関数です。

しかし、比較する処理は以下のようになっており、一貫していません。

location.pathnameとhref属性が一致するか
location.pathnameがregistという文言を含んでいないか　※要素を使用していない！
上記以外

javascript
1           // href属性がlocaltion.pathnameと一致するか
2           if (location.pathname === $(this).attr('href')) {
3                $(this).parent('li').addClass('active');
4                console.log('a');
5           // location.pathnameがregistを含んでいないか
6            } else if (location.pathname.indexOf('regist') > -1) {
7                $('#regist').addClass('active');
8                console.log('b');
9            } else {
10                $('#index').addClass('active');
11                console.log('c');
12            }

やりたいことは、以下の通りなのではないですか？

location.pathnameと部分一致するhref属性を持った要素を探し出す
その要素の親要素であるli要素に対してactiveというクラスを付与する

javascript
1
2$(function() {
3
4  // パスより最後のhtml部分を切り出す
5  // 例) "/AAA/BBB/CCC.html"  → "CCC.html"
6  let path = location.pathname;
7  let html = path.slice(path.lastIndexOf("/") + 1);
8
9  // 上記、htmlより部分一致するglobal_nav配下のhref属性を持った要素を取得
10  let $currentLink = $('.global_nav').find('[href*="' + html +'"]');
11  
12  // 更にその要素の親要素に対してactiveクラスを付与
13  $currentLink.parent().addClass('active');
14
15});
16