jQuery で複数のクラスをまとめて追加する方法

2015/05/15jQuery

jQuery で複数のクラスをまとめて追加する方法についてです。

早速結論ですが、単純に addClass() メソッドにスペース区切りで複数のクラス名を渡せば OK です。

$('a').addClass('fa fa-external-link');

逆に複数のクラスを削除したいときも同様の書き方が使えます。

$('a').removeClass('fa fa-external-link');

さらに、複数のクラスをまとめてトグルしたいときにも toggleClass() で同じ書き方ができます。 toggleClass() に渡された複数のクラスはそれぞれ独立してトグルされます。

$('a').toggleClass('fa-external-link active');

追記 2020/08/01: 2020 年現在、 IE 11 等の古いブラウザをサポート対象外にできる場合は、 jQuery を使わず vanilla JS の classList を使う手もあります。

var el = document.getElementById('title');

// 複数のクラスを追加する
el.classList.add('class-a', 'class-b', 'class-c');

// 複数のクラスを削除する
el.classList.remove('class-a', 'class-b', 'class-c');

// `classList.toggle()` は存在するが、複数のクラスをまとめて扱うことはできない