JQuery内で「function()」を使わず、アロー関数で記述したい

前提・実現したいこと

・BootStrapのサイドバーで、JQueryのスクリプトによって選択された項目を「menu-open」および「active」にしたい
・「function()」を使わず、アロー関数で記述したい

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

アロー関数で記述すると、動作しない

該当のソースコード

JQuery
1//これは動く
2$(() => {
3    var url = window.location;
4
5    // for sidebar
6    $('ul.nav-sidebar a').filter(function() {
7        return this.href == url;
8    }).addClass('active');
9
10    // for treeview
11    $('ul.nav-treeview a').filter(function() {
12        return this.href == url;
13    }).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
14});
15
16
17//これは動かない
18$(() => {
19    var url = window.location;
20
21    // for sidebar
22    $('ul.nav-sidebar a').filter(() => {
23        return this.href == url;
24    }).addClass('active');
25
26    // for treeview
27    $('ul.nav-treeview a').filter(() => {
28        return this.href == url;
29    }).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
30});
31

試したこと

「function()」を使えば確実に動作するが、その部分をアロー関数として「() =>」とすると、全く動作しない

補足情報（FW/ツールのバージョンなど）

JQuery 3.4.1
BootStrap 4.4.1

m.ts10806

2021/06/28 06:46

htmlもご提示ください。あと、エラー確認して、エラー出てるならコピペしてください

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

回答1件

ベストアンサー

functionとアロー関数では、thisの扱いが違います。アロー関数ではthisは**書いた場所のthis**に固定されてしまうので、jQueryがコールバック関数へ渡してくるthisを受け取ることができません。

幸い、$().filterでは第2引数に要素を渡してくるので、そちらを使うことが可能です（jQuery公式）。

javascript
1$(() => {
2    var url = window.location;
3
4    // for sidebar
5    $('ul.nav-sidebar a').filter((_, elem) => {
6        return elem.href == url;
7    }).addClass('active');
8
9    // for treeview
10    $('ul.nav-treeview a').filter((_, elem) => {
11        return elem.href == url;
12    }).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
13});