[jQuery]複数のセレクタを一つにまとめる方法

WEB

2026.06.24

カンマが使えないケースもあるよね。

どういうことか

こういうのがあったら

$('.js-btn').on('click', function () {
    $('.target01').toggleClass('active');
    $('.target02').toggleClass('active');
})

やること同じならまとめたいのが人の性。

こうできる。

$('.js-btn').on('click', function () {
    $('.target01, .target02').toggleClass('active');
})

カンマでの連結は珍しくない。

じゃあこれは？

$('.js-btn').on('click', function () {
    $(this).toggleClass('active');
    $('.target').toggleClass('active');
})

という話。
カンマは使えない。

思いつくのはこれ。

$('.js-btn').on('click', function () {
    $('.js-btn, .target').toggleClass('active');
})

間違いじゃないけど、確実に同じ要素を拾えるかといえばそうでもないし、もやもやする。
idとかユニークなやつで指定できるならいいけど、そうもいかないケースだってなくはないだろうし。

.add()でやればなんかいい感じ。

$('.js-btn').on('click', function () {
    $(this).add('.target02').toggleClass('active');
})

安心感がある。