javaScriptで現在のURLを取得して該当するローカルナビにクラスを付与したい。

Question

###前提・実現したいこと
現在地を取得してマッチしたURLを持ったローカルナビのリストにクラスを付与したい。

1 現在のURLを取得。
2 #localNavの中のa要素のhref属性に、1で取得したURLと同一の物を探す。
3 マッチした要素があったら、そのURLを持つ親のliにクラスcurrentを付与する。

ちなみに現在のjsコードは中途半端ですが、a要素href属性に、現在のURLとマッチする物があったらliにクラスを付与する（全部）となっています。

###発生している問題・エラーメッセージ
現在URLとローカルナビ内のhrefの取得までうまくいったのと思うのですが、
マッチしたhrefが見つかった場合のliへのクラス処理の方法がわかりません。

###該当のソースコード

<ul id="localNav">
<li><a href="/aaaa/bbbbbbbbbb/index.html">テキスト</a></li>
<li><a href="/aaaa/bbbbbbbbbb/ccc01.html">テキスト</a></li>
<li><a href="/aaaa/bbbbbbbbbb/ccc02.html">テキスト</a></li>
<li><a href="/aaaa/bbbbbbbbbb/ccc03.html">テキスト</a></li>
<li><a href="/aaaa/bbbbbbbbbb/ccc04.html">テキスト</a></li>
<li><a href="/aaaa/bbbbbbbbbb/ccc/index.html">テキスト</a></li>
</ul>

<script>
var nav = document.getElementById('localNav'),
    child = nav.getElementsByTagName('a'),
    path = location.pathname.slice(16); // 現在のパス16番目以降取得
    for(var i = 0; i < child.length; i++){
        var href = child[i].getAttribute('href').slice(16); //a要素のhrefのURL16番目以降を配列で取得
        if(href === path){
            for(var j = 0; j < nav.children.length; j++){
                nav.children[j].classList.add('current');
            }
        }else{
        }
    }
</script>

###試したこと
href自体は配列で取得されているはずなので、マッチした配列番号に対してクラスを振るなど考えましたが、そもそも配列番号を取得する方法がわかりませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
.slice()でURLを取得していますが、下2階層のURL取得方法でいい方法があれば教えてください。
こういう書き方の方が良いなどあれば大歓迎です。

Answer 1

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
  $('#localNav').find('a').each(function () {
    if (location.pathname == $(this).attr('href')) {
      $(this).parent('li').addClass('current');
    }
  });
});
</script>

jquery 使用していいならばこれでいけると思います。

Comments

[退会済みユーザー]

ありがとうございます。
プレーンなjavascriptでお願いしたいです。

Answer 2

自己解決しました。
原因としては、
・for文に対する理解が足りなかった。
・配列の使い方をわかってなかった。
などがあります。

もっとより良い書き方があるかとは思いますが現状の知識ではこれが限界でした。

ありがとうございます！

var nav = document.getElementById('localNav'),
    a = nav.getElementsByTagName('a'),
    path = location.pathname, //現在のパス取得
    url = []; //後に取得したURLを入れる空の配列を作成
for (var i = 0; i < a.length; i++) {
    var href = a[i].getAttribute('href'); //localNavの中のa要素すべてのhref属性のパスを取得
    url[i] = href; //それを配列に格納
}
var listPath = url.indexOf(path); //現在のパスと、ローカルのパスが一致する配列番号を取得する
nav.children[listPath].classList.add('current');
</script>