JSの解説をお願いします

Question

アクセスされているファイル名と同じリンク先を持つリストのクラスに任意のものを加えているのだと思うのですが、よくわからないので解説をお願いします。

    var url = window.location;
    var element = $('ul.nav a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in').parent();
    if (element.is('li')) {
        element.addClass('active');
    }
});

Comments

[tanat]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

[izkn]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

[退会済みユーザー]

こちらの質問が他のユーザから「プログラミングに関係がない質問」という評価を受けています
teratailでは、プログラミングに関して困っていることがないと思われる質門を推奨していません。
具体的に困っている理由や解決したいことを明確に記入していただくと、回答が得られやすくなります。

Answer 1

全て繋がっていてわかりづらいので1つづつ説明します。

下記はおっしゃる通り、ul.nav aに該当する aタグを取得して、
url(window.locationですね)が一致するものだけを抜き出しています。
※ indexOf~とやっているのは http://sample.com/hoges と単に /hoges という場合の両方に対応するためだと思います。

$('ul.nav a').filter(function() {
  return this.href == url || url.href.indexOf(this.href) == 0;
})

そうして抜き出したaタグにinクラスを付与しています。

.addClass('active')

今度はそのaタグの親の親のタグにactiveクラスを付与しています。

.parent().parent().addClass('in')

繋がっている部分の一番最後にさらに親のタグを取得して変数elementに保存しています。

.parent();

そうして取り出したelementがliタグならactiveクラスを付与しています。

if (element.is('li')) {
  element.addClass('active');
}

このコードからわかるHTMLの構成は下記のような感じですね

<ul class='nav'>
  <li class='active'>
   <div class='in'>
     <div>
       <a href='/hoges' class='active'></a>
     </div>
   </div>
  <li>
</ul>

Comments

[think49]

> ※ indexOf~とやっているのは http://sample.com/hoges と単に /hoges という場合の両方に対応するためだと思います。
a.href は絶対URIを返す仕様の為、相対URIで比較する状況はないと思います。
index 値が 0 なので前方一致検索の為ではないかと。
'https://teratail.com/questions/24113'.indexOf('https://teratail.com/') === 0; // true
.active という名称から自身のリンクを強調表示する機構と想像できます。

[pac894398]

素晴らしい回答をいただきありがとうございます。

a.href が相対リンクを返しているのだと思い込んでおり 理解できていませんでした。

分かりやすい回答 心から 感謝させていただきます。