jQuery URLで判定して listにclassを付与したい（動的）

Question

下記イメージのように、リストをクリックすると、そのリストの一覧ページに遷移。
遷移先ページ（クリックしたリスト）のリスト背景色を変えたいです。

例)
「伐採」（http://localhost:XXX/blog_category/felling/）をクリック-> 「伐採」一覧ページへ遷移->リストの「伐採」の背景に色を付ける（class付与）

jQuery URLで判定して　listにclassを付与しようと以下のURLに対して、

 <ul>
      <li class=""><a class="niwa_post_link" href="http://localhost:XXX/blog">ALL</a></li>
      <li><a class="niwa_post_link" href="http://localhost:XXX/blog_category/felling/">伐採</a</li>. 
      <li><a class="niwa_post_link" href="http://localhost:XXX/blog_category/prune/">剪定</a</li>. 
      <li><a class="niwa_post_link" href="http://localhost:XXX/blog_category/diary/">庭づくり</a></li>  
      <li><a class="niwa_post_link" href="http://localhost:XXX/blog_category/diary/">日々</a></li>  
 </ul>

以下のようにJQueryを書きました。

$(window).on("load", function () {
  if (document.URL.match("/blog_category/felling/"))
  {
    $(".tab_nav ul li:nth-of-type(2)").addClass("on");
  } else if (document.URL.match("/blog_category/prune/"))
  {
    $(".tab_nav ul li:nth-of-type(3)").addClass("on");
  } else if (document.URL.match("/blog_category/gardening/"))
  {
    $(".tab_nav ul li:nth-of-type(4)").addClass("on");
  } else if (document.URL.match("/blog_category/diary/")) 
  {
    $(".tab_nav ul li:last-of-type").addClass("on");
  }
});

URLがマッチした時にliタグの何番目にclass="on"を付与する。といった書き方なのでliタグの順番や数が変わると意図した挙動になりません。

実際のリストはwordpressで管理しており、リストの数は動的に変わります。
(そのカテゴリーに属する記事がない場合は、リストに表示されない。)

  <ul>
        <li class=""><a class="niwa_post_link" href="<?php echo esc_url(home_url('/blog')); ?>">ALL</a>
        </li>
               <?php
                    $categories =get_terms('blog_category');
                    foreach ($categories as $category) {
                        echo '<li><a class="niwa_post_link" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
                    }
                    ?>
                </ul>

どうすれば、動的に増えるリスト（カテゴリー）に対してURLで判定してclassを付与する。といったことが実現できるでしょうか?

  if (document.URL.match("/blog_category/felling/")　&& li a　の要素の中身が"伐採")
  {
    $(".tab_nav ul li a 要素の中身が"伐採")に.addClass("on");
  }else if (document.URL.match("/blog_category/prune/")　&& li a　の要素の中身が"剪定")
  {
    $(".tab_nav ul li　a 要素の中身が"剪定")に".addClass("on");
  } 

上記のように日本語を入れて考えてみたのですが、書き方がわかりませんでした。

またはURL判定以外での実装方法はありますでしょうか?

Answer 1

未検証ですが、これでどうでしょうか

$(function() {
	$('.tab_nav ul a[href$="' + location.pathname + '"]')
	.parent().addClass('on');
});

この処理なら
$(window).on("load", ～
より
$(function() {
の方がいいです。

Comments

[Fukusuke0604]

返信が遅くなりすみませんでした。
教えていただいた方法で実現できました!! ありがとうございます。

もしよろしければ、以下の点も教えてください。

Q1: $(window).on("load", ～
より
$(function() {
の方がいいです。

とのことですが、なぜ$(function() {の方が良いのでしょうか?
画面を読み込んでからの処理。と認識していたため、$(window).on("load", ～　だと思い込んでいました。

Q2: 教えて頂いたjsの処理の流れがよく理解できていません。。。。よろしければコードの解説もお願いします。

location.pathname …… 現在ページURLのパス名を参照する.
a[href$="' + location.pathname + '"]')　← ここで、現在ページURLのパス名を参照しているのだと思うのです
が、

$(function() {
////'現在アクセスしているページとlocation.pathnameで取得したパスと等しい要素にアクセス。 ////
$('.tab_nav ul a[href$="' + location.pathname + '"]')

////アクセスしたaタグの親要素にclass追加。 ////
.parent().addClass('on');　
});
上記認識で良いですか?
また、$('.tab_nav ul a以降が[]で囲われるのは何故でしょうか?

[CTRL-S]

Q1:の回答

説明すると長くなるので「JavaScript ready load」で検索してみてください。
$(function() {
はready状態で実行
$(window).on("load", ～
はwindow.onload（違う書き方もあります）で実行となります。

Q2:の回答

解釈はあっています。
[]は属性セレクターというものです。
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors

例えば現在のURLが
http://localhost:XXX/blog_category/prune/
の場合
$('.tab_nav ul a[href$="' + location.pathname + '"]')
は
$('.tab_nav ul a[href$="/blog_category/prune/"]')
となるので
<a class="niwa_post_link" href="http://localhost:XXX/blog_category/prune/">剪定</a>
がマッチします。
その親要素の<li>にclassを付けたいので
.parent().addClass('on');
としてます。

[CTRL-S]

ここまで書いてあれですが、
この処理はPHP側でやった方がいいと思います。
PHPは初心者なのでもしPHPでやりたいなら他の人に質問してください。

まあ大した処理ではないし、他にもJavaScriptでやる事があるならJavaScriptでやってもいいと思いますが。

[Fukusuke0604]

丁寧に解説ありがとうございます!!

処理の流れや仕組み。理解できました。
$(function(), $(window).on("load", これらの使い分けも意識するようにいたします!!