Javascriptでページ移動した時に表示を変えたい

Question

共通のサイドメニューがあるHPにて、ページ移動をした際移動先で選択したサイドメニューの背景色をaタグのclassにactiveを追加することにより変えたいのですがうまく行きません。

 <ul id="ul">
    <li class="li">
       <a class="a" href="/1/2">一覧</a>
    </li>
 </ul>

 var url = "/" + window.location.pathname.split("/")[1] + "/" + 
 window.location.pathname.split("/")[2];
        $("#ul li a[href=" + "'" + url + "'" + "]").addClass('active');

 var urlsub = "/" + window.location.pathname.split("/")[1] + "/" + 
 window.location.pathname.split("/")[2] + "/" + window.location.pathname.split("/")[3];
        $("#ul li a[href=" + "'" + urlsub + "'" + "]").addClass('active');

直接サイドメニューから移動するurlの方はclassにactiveが追加されるのですが、サイドメニューから移動した一覧ページから更に移動するページだとclassが追加されません。（urlsubの方）
urlはhttp://test/1/2
urlsubはhttp://test/1/2/3

パス自体はurlもurlsubも想定しているものが取得できているのでaddClassの部分が何か違うのかと思ったのですが、何がダメなのかがわかりません。

どなたかご教授いただけますと幸いです。
よろしくお願いいたします。

追記
説明が不十分で申し訳ありません。
図を作ってみました。

Comments

[Lhankor_Mhy]

<a class="a" href="/user/index">一覧</a>

のhrefが/user/indexではなく、

/1/2/3

になっているという想定ですか？

[think49]

<a href="/1/2"> と <a href="/1/2/3"> がDOM上に存在していますか。

[think49]

}); の影響で SyntaxErrorが発生します。
エラーが発生しないコードを質問文に入力してください。

[退会済みユーザー]

失礼しました。
<a class="a" href="/user/index">一覧</a>
のhrefは
/1/2
です。

[think49]

<a href="/1/2/3"> が存在しないならば、
$("#ul li a[href=" + "'" + urlsub + "'" + "]").addClass('active');
が機能しないですね。

[退会済みユーザー]

<a href="/1/2/3">はサイドメニュー上には存在しませんが、http://test/1/2から移動ができます。
var urlsub = "/" + window.location.pathname.split("/")[1] + "/" +
window.location.pathname.split("/")[2] + "/" + window.location.pathname.split("/")[3];
で/1/2/3を取得することはできています。

[Lhankor_Mhy]

よくわからないのですが、urlsub が /1/2/3 であることをご認識の上で、
さらに、<a href="/1/2/3">が存在しないということもご認識の上で、
$("#ul li a[href=" + "'" + urlsub + "'" + "]") にマッチする要素が存在しないことにお悩みなのですか？

[退会済みユーザー]

そうです。
サイドメニュー→http://test/1/2へ移動→http://test/1/2/3へ移動
が可能な状態で、
var url = "/" + window.location.pathname.split("/")[1] + "/" +
window.location.pathname.split("/")[2];
$("#ul li a[href=" + "'" + url + "'" + "]").addClass('active');
だとhttp://test/1/2にclass追加できるのですが、http://test/1/2/3にできなかっため、
var urlsub = "/" + window.location.pathname.split("/")[1] + "/" +
window.location.pathname.split("/")[2] + "/" + window.location.pathname.split("/")[3];
$("#ul li a[href=" + "'" + urlsub + "'" + "]").addClass('active');
としたのですがclassが追加されませんでした。

[think49]

> urlsub が /1/2/3 であることをご認識の上で、
> さらに、<a href="/1/2/3">が存在しないということもご認識の上で、
> $("#ul li a[href=" + "'" + urlsub + "'" + "]") にマッチする要素が存在しない

これを肯定されていますが、「<a href="/1/2/3">が存在しないから、$("#ul li a[href=" + "'" + urlsub + "'" + "]") にマッチする要素がない」という因果関係は理解されていますか。
<a href="/1/2/3"> を作れば、$("#ul li a[href=" + "'" + urlsub + "'" + "]") にマッチする要素が存在するようになります。

[Lhankor_Mhy]

よくわからないのですが、なぜそれでclassが追加されると思ったのですか？

[Lhankor_Mhy]

$("#ul li a[href=" + "'" + urlsub + "'" + "]")

の変数が展開されると、

$("#ul li a[href='/1/2/3']")

になることはご理解されていますか？

[退会済みユーザー]

/1/2/3というページ自体は存在するからです。
ただ<a href="/1/2/3">という記載は存在しません。
/1/2/3に移動した先でclassが追加されるようにしたいです。
移動ができているので
var urlsub = "/" + window.location.pathname.split("/")[1] + "/" +
window.location.pathname.split("/")[2] + "/" + window.location.pathname.split("/")[3];
も取得ができています。
そこからclass追加ができないため質問させていただきました。

[Lhankor_Mhy]

どうもよくわからないのですが、

var urlsub = "/" + window.location.pathname.split("/")[1] + "/" +
window.location.pathname.split("/")[2] + "/" + window.location.pathname.split("/")[3];
$("#ul li a[href=" + "'" + urlsub + "'" + "]").addClass('active');

というコードが書いてあるのは、次のページの内、どれですか？
/1
/1/2
/1/2/3

[think49]

(1) location.href === "http://test/1/2/3" ならば、<a href="/1/2/3"> と <a href="/1/2"> が存在する
(2) location.href === "http://test/1/2" ならば、<a href="/1/2"> が存在する

この条件は成立しないという事ですか。
classを追加といっていますが、classを追加する対象の <a> は存在しないのでしょうか。

[退会済みユーザー]

全てです。
正確には別ファイルに記述したコードを全てのページに対しリンクが貼られている状態です。
Javascript、質問に記載のHTML（サイドメニュー）は記載の通り共通のメニューで、全てのページに表示されています。
また、更に正確にいうとHTML部分は正しくはPHPです。
記載をHTMLに変換された状態を記載しています。

[Lhankor_Mhy]

よくわからないのですが、
/1
/1/2
/1/2/3
の全てのページで、<a href="/1/2/3">が存在しないのですか？

[退会済みユーザー]

/1には/1/2のみ
/1/2には/1と/1/2/3が存在します。

[退会済みユーザー]

classを追加する対象の <a>は存在します。

[Lhankor_Mhy]

urlsub が /1/2/3 になるページは、
/1
/1/2
/1/2/3
のうち、最後だけだと理解していますが、これは合っていますか？

[think49]

<a>が存在しており、DOM構築が完了しているなら、「セレクタ文字列が誤っている」可能性が濃厚と思われます。

[Lhankor_Mhy]

a[href='/1/2/3']
というセレクタは、href属性が /1/2/3 と完全一致するa要素という意味なのですが、これは理解されていますか？

[退会済みユーザー]

/1/2/3になるページは/1/2/3のみで間違いありません。
その/1/2/3になるページでclassを追加したいです。

[Lhankor_Mhy]

「classを追加したい」要素は、どれですか？

[退会済みユーザー]

<a class="a" href="/1/2">一覧</a>
です。

[Lhankor_Mhy]

なんですと……

[Lhankor_Mhy]

では、

var url = "/" + window.location.pathname.split("/")[1] + "/" +
window.location.pathname.split("/")[2];
$("#ul li a[href=" + "'" + url + "'" + "]").addClass('active');

の方でclassがつくと思いますが、これで解決しそうですか？

[退会済みユーザー]

そちらだと/1/2の方でしか追加されないです。
そこが問題だったので/1/2/3用に
var urlsub = "/" + window.location.pathname.split("/")[1] + "/" +
window.location.pathname.split("/")[2] + "/" + window.location.pathname.split("/")[3];
$("#ul li a[href=" + "'" + urlsub + "'" + "]").addClass('active');
を記載し、/1/2/3を取得するところまではできたのですがclass追加はできませんでした。

[think49]

<iframe> や <frame> を跨いだ文書上のa要素を参照しようとしていませんか

[Lhankor_Mhy]

「そちらだと/1/2の方でしか追加されないです」とのことですが、15:26のコメントで、「/1/2には/1と/1/2/3が存在します。」とご回答いただいています。

つまり、/1/2 のページには、<a href="/1/2">がないはずなので、classが追加されることはないはずです。
状況を良く見直して、現状と質問が一致するように編集し直してください。
このままでは、問題を認識することができません。
というか、釣りを疑っています。

[退会済みユーザー]

何度もすみません。
図を書いてみたのですがこちらで状況わかるでしょうか？

[Lhankor_Mhy]

わからないのですが、/1/2 と /1/2/3 の一覧には何があるのですか？

[退会済みユーザー]

図の「一覧」は
<ul id="ul">
<li class="li">
<a class="a" href="/1/2">一覧</a>
</li>
</ul>
のみがあります。
一覧は共通項目なので表示は変わりません。

[Lhankor_Mhy]

a[href='/1/2/3']というセレクタに、<a class="a" href="/1/2">という要素がマッチするだろう、と考えている根拠は何ですか？

a[href='/1/2/3']
というセレクタは、href属性が /1/2/3 と完全一致するa要素という意味なのですが、これは理解されていますか？

[退会済みユーザー]

すみません、なぜ話が噛み合っていなかったのかわかりました。
a[href='/1/2/3']の部分の意味を勘違いしていました。
お手数おかけしてしまいすみません。
ありがとうございました。

Answer 1

修正コード

質問文に書かれていない「他の条件」を整えてやれば、期待通りに動作しました。
現行コードと差分をとれば、修正できると思います。

<style>
.active {
  font-weight: bold;
  color: rgb(31, 22, 22);
  background-color: #f99;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<ul id="ul">
  <li class="li">
    <a class="a" href="/user/index">一覧</a>
  </li>
  <li class="li">
    <a class="a" href="/1/2">/1/2</a>
  </li>
  <li class="li">
    <a class="a" href="/1/2/3">/1/2/3</a>
  </li>
</ul>
<script>
'use strict';
((window)=>{
  var url = "/" + window.location.pathname.split("/")[1] + "/" + window.location.pathname.split("/")[2];
  $("#ul li a[href=" + "'" + url + "'" + "]").addClass('active');

  var urlsub = "/" + window.location.pathname.split("/")[1] + "/" + window.location.pathname.split("/")[2] + "/" + window.location.pathname.split("/")[3];
  $("#ul li a[href=" + "'" + urlsub + "'" + "]").addClass('active');
})({location: new URL('https://example.com/1/2/3')})
</script>

メタ構文変数

要素名と同じid属性値、class属性値はサンプルであっても違和感があるので、メタ構文変数を使うことをお勧めします。

• メタ構文変数 - Wikipedia

Re: uri__ さん

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。
説明不足で申し訳ありません。

サイドメニューには <a class="a" href="/1/2">一覧</a>のみでhttp://test/1/2/3は一覧ページからのみ移動可能です。
また、http://test/1/2/3の3はいつも3ではないため、直接指定ができません。

ご回答いただいた内容を参考にしてみたのですがactiveクラスはつけることができませんでした。

[think49]

> サイドメニューには <a class="a" href="/1/2">一覧</a>のみでhttp://test/1/2/3は一覧ページからのみ移動可能です。

「サイドメニュー」という言葉では伝わらないので、マークアップ中のどのHTMLタグを指しているのかを明確にして下さい。
問題となるのは、$("#ul li a[href=’/1/2/3’]").length が1以上となる条件を満たしているかどうか、です。

厳密にいえば、「コード実行時点」で1以上でなければなりません。

> また、http://test/1/2/3の3はいつも3ではないため、直接指定ができません。

回答した「修正コード」は直接指定を意図していません。
URLと<a href>を一致する状況を作り出す為に、new URLでURLを偽装しましたが、pathnameは /foo/bar/piyo でも機能します。

[think49]

> 厳密にいえば、「コード実行時点」で1以上でなければなりません。

script要素がa要素より前に存在するなど、DOM構築前にJavaScriptコードが実行された場合、目的の要素ノードを発見できなくなります。
要素位置の関係でノードを発見できないならば、DOMContentLoadedやjQuery()で解決可能です。

[退会済みユーザー]

サイドメニューは記載のHTML部分すべてです。

window.addEventListener('DOMContentLoaded', (event) => {
var urlsub = "/" + window.location.pathname.split("/")[1] + "/" +
window.location.pathname.split("/")[2] + "/" + window.location.pathname.split("/")[3];
$("#ul li a[href=" + "'" + urlsub + "'" + "]").addClass('active');
});

としてみたのですがclassは追加されませんでした。

[Lhankor_Mhy]

横からすみませんが、低評価した方、理由をご提示いただけますか？

Answer 2

var urlsub = location.pathname;
var urlfirst = "/" + window.location.pathname.split("/")[1] + "/2";
if(urlsub.match('3')){
     $("#ul li a[href=" + "'" + urlfirst + "'" + "]").addClass('active');
}

としたらできました。