jQuery オブジェクトをアロー関数でループする

Question

let str = '';
$('#checklist input:checked').each((_, e) => {
  console.log(e);
  str += e.val() + ',';
});

上記のようなあるブロック以下のチェックされてるチェックボックスの value をカンマ区切り文字列で取得するコードをかいてみたんですが

Uncaught TypeError: e.val is not a function

とエラーが出ます

デバッグ出力をいれてみたところ確かに e にはチェックボックスの HTML が入っているのですが
each を通すと .val() は使えなくなるのでしょうか

チェックボックスの value を val() で取得するブログはたくさんでてくるのですが
function と $(this) で取得している記事ばかりでアロー関数のみで取り出す方法がわかりません

https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9

のサイトで function よりアロー関数でかくのが最近の主流ときいたのでそういうコーディングになれようとしてるのですが
jQuery　にあまりなれていないのでどうすればいいのかわからないのでお知恵をお貸しください

Answer 1

eachをつかってカンマをつなぐのはちょっと冗長ですね

<script>
$(function(){
  $('#btn').on('click',()=>{
    let str=$('#checklist input:checked').map((_,e)=>{
      return $(e).val();
    }).get().join(',');
    console.log(str);
  });
});
</script>

<div id="checklist">
<input type="checkbox" value="1" checked><br>
<input type="checkbox" value="2"><br>
<input type="checkbox" value="3" checked><br>
<input type="checkbox" value="4"><br>
<input type="checkbox" value="5" checked><br>
<input type="button" id="btn" value="check">
</div>

Comments

[退会済みユーザー]

なるほどです
, をつけるところもマップでかけるんですね
参考になります…

Answer 2

$(e).val() でいけます

Comments

[退会済みユーザー]

ありがとうございます
いけました！

Answer 3

どうぞ。

【アロー関数をjQueryのonメソッドとeachメソッドで使う場合のthis | WEBMAN】
https://webman-japan.com/memo/arrowfunction-use-to-jquery/

Comments

[退会済みユーザー]

ありがとうございます
ちゃんとブログもあるんですね
検索の仕方が足りませんでした

Answer 4

Array.prototype.map

Array.prototype.map 向きな気がしました。
(全てにおいて、jQuery APIを使おうとすれば、発想の幅を狭めます。)

$('#checklist input:checked').get().map(e=>e.value).join();

アロー関数

のサイトで function よりアロー関数でかくのが最近の主流ときいたのでそういうコーディングになれようとしてるのですが

アロー関数と関数式は機能が異なるので、流行を追いかける目的でアロー関数を使うといつか罠にはまると思います。
それぞれの機能の違いを意識すれば、適切な機能を選択できるようになるものです。

Re: kating さん

Comments

[退会済みユーザー]

そうなのですね…

そのブログには
＞functionはもはやNGワードなので忘れてください。
とあったんですが公式にガイドラインみたいなのがでているわけではないんですね
自分としてはブログ検索で調べることが多いのでまだまだ function を使った例のほうが多くて使えるほうがありがたいです