jQuery thisが指し示すもの

Question

実現したいこと

最近teratailを知り、記載させていただいています。
jqueryのeachにアロー関数を使いたいと思っています。
実装しようとしているのは単純なアコーディオンです。
まずは複数の要素に対して処理を行う前段階を確立させるゴールを目指します。（クリックしてからの動作などは一旦なしです）

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

アロー関数を使用すると、コンソールでdtの数を調べると「6」
アロー関数未使用だと、コンソールでdtの数を調べると「3」
と表示されます。
各dl.accordion の中に含まれているdtの数を表示したいので「3」と表示されるゴールを目指していますが、アロー関数を使用するとdocmuent要素からdtを探して、dtの合計数の「6」が表示されてしまいます。
アロー関数時のthisはdocumentを必ず参考してしまうのでしょうか？
アロー関数を使用し、アロー関数なしのような「3」となるゴールを目指したいです。

//■html
<dl class="accordion">
<dt>Item 1</dt>
<dd>Item 1contents</dd>
<dt>Item 2</dt>
<dd>Item 2contents<</dd>
<dt>Item 3</dt>
<dd>Item 1content3<</dd>
</dl>
<br><br>
<dl class="accordion">
<dt>Item 1</dt>
<dd>Item 1contents</dd>
<dt>Item 2</dt>
<dd>Item 2contents<</dd>
<dt>Item 3</dt>
<dd>Item 1content3<</dd>
</dl>

//アロー関数を使用
$(function () {
  $('.accordion').each(() => {
    console.log($(this));//document
    console.log(this);
    const dt = $(this).find('dt');
    console.log('アロー:' + dt.length);//コンソール結果 アロー:6 が2回表示
  });
});

//アロー関数を使わない
$(function () {
  $('.accordion').each(function(){
        console.log($(this));
    const dt = $(this).find('dt');
    console.log('ノーアロー:' + dt.length);//コンソール結果 ノーアロー:3 vが2回表示
  });
});

//暫定
//アロー関数を使用 改良版
$(function () {
  $('.accordion').each((i, ele) => {
    const dt = $(ele).find('dt');
    console.log(i);
    console.log(ele);
    console.log(dt.length);
  });
});

Comments

[yambejp]

jQueryを使う限りアロー関数は使わないでください。

Answer 1

その用途で this を使いたいならアロー関数は使えません。「どのように呼んでも this は定義時のものと同一になる」がアロー関数の特徴ですから、呼ばれるたびに this が違うものを指すという each() の仕様にはまったくもって合いません。

アロー関数を使うなら、$('.accordion').each((index, element) => { のようにして this のかわりに element を使う必要があります。

Comments

[shinoru]

ありがとうございます。
暫定で考えたソースがその形なのでやはりこうやって使うのがよさそうですね。

//暫定
//アロー関数を使用 改良版
$(function () {
$('.accordion').each((i, ele) => {
const dt = $(ele).find('dt');
console.log(i);
console.log(ele);
console.log(dt.length);
});
});