前提・実現したいこと

■ナビゲーションにカレント機能をつけたい
ナビゲーションのリンクと現ページのURLが一致した際、該当ナビゲーションのliタグにクラス（selected）を付与し、
現在のURLがナビゲーションにない場合はクラスを付与しない

ご相談内容

ナビゲーションのリンクと現ページのURLが一致した際、該当ナビゲーションのliタグにクラス（selected）を付与したく
jqueryを書きました。
ローカルでは問題なく動作確認ができるのですが、サーバーへアップしたところエラーが表示されました。

そもそもコード自体が間違っているのか、
別に原因があるのかがわからずご相談したく、ご質問させていただきました。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'match' of undefined

該当のソースコード

html
1<body id="top">
2<ul id="nav">
3　　<li class="fruits"><a href="/">トップ</a></li>
4　　<li><a href="/orenge.html">オレンジ</a></li>
5　　<li><a href="/grape.html">グレープ</a></li>
6</ul>

jquery
1$(function(){
2    $('#nav li a').each(function(){
3        var target = $(this).attr('href');
4        if(location.pathname.match(target) && target.match("html")) {
5            $(this).parent().addClass('selected');
6        } else {
7            $(this).parent().removeClass('selected');
8        }
9    });
10    if (document.getElementById('top') != null) {
11        $('.fruits').addClass('selected');
12    }
13});
14

jqueryをはじめて書いてみたので無駄な記述が多いかと存じますが何卒よろしくおねがいします。

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

回答1件

ローカルでサーバー立てて試したのですが、私はエラー出ませんでした。
なので他に原因があるかも知れませんね。。。

関係ないかもですが、htmlのインデントに全角の空白文字が入ってました。
そういったミスが他の部分にあるかも知れないです。

試したコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
9    <script src="index.js"></script>
10</head>
11<body id="top">
12<ul id="nav">
13    　　<li class="fruits"><a href="/">トップ</a></li>
14    　　<li><a href="/orenge.html">オレンジ</a></li>
15    　　<li><a href="/grape.html">グレープ</a></li>
16</ul>
17</body>
18</html>

javascript
1$(function(){
2    $('#nav li a').each(function(){
3        var target = $(this).attr('href');
4        if(location.pathname.match(target) && target.match("html")) {
5            $(this).parent().addClass('selected');
6        } else {
7            $(this).parent().removeClass('selected');
8        }
9    });
10    if (document.getElementById('top') != null) {
11        $('.fruits').addClass('selected');
12    }
13});