jQueryでclassを取得する方法｜attr()・hasClass()・複数要素を初心者向けに解説

jQueryでclass名を取得したいのに、$('.notice')とattr('class')のどちらを使えばよいのか迷うことがありますよね。

class属性に書かれた名前を文字列として取得するなら、$('.notice').attr('class')を使います。特定のclassが付いているかだけを調べたい場合は、hasClass()の方が分かりやすいです。

この記事では、1つの要素からclass名を取得する基本から、複数のclass、複数要素、class未設定時の対処まで、実際に動くコードと表示結果を使って解説します。

jQueryでclassを取得する方法の結論
attr(‘class’)でclass名を取得する基本
1. 複数のclassは空白区切りの文字列で返る
特定のclassがあるかはhasClass()で確認する
複数要素のclass名をeach()で取得する
classが未設定のときはundefinedになる
class名を取得できないときの確認ポイント
取得後にclassを追加・削除したい場合
まとめ

jQueryでclassを取得する方法の結論

やりたいこと	書き方	返り値
class属性の値を取得する	`attr('class')`	文字列または`undefined`
特定のclassがあるか確認する	`hasClass('class名')`	`true`または`false`
複数要素を1つずつ調べる	`each()`の中で`attr('class')`	各要素のclass属性

まず押さえたいのは、「要素を選ぶこと」と「選んだ要素のclass名を取得すること」は別の処理だという点です。

$('.notice')は、noticeというclassを持つ要素を選ぶjQueryセレクターです。その後ろに.attr('class')を付けると、選んだ要素のclass属性を取得できます。

attr(‘class’)でclass名を取得する基本

ここでは、noticeとis-activeの2つのclassを持つ要素から、class属性の値を取得します。

まず、取得対象と結果表示用のHTMLをindex.htmlのbody内へ記述してください。

<div class="notice is-active">お知らせを表示しています</div>
<p>取得結果：<code id="class-result"></code></p>

次に、jQuery本体を読み込んだ後のscript.jsへ、次のコードを追加します。

jQuery(function ($) {
  const className = $('.notice').attr('class');
  $('#class-result').text(className);
});

$('.notice')で要素を選び、attr('class')でclass属性の値を取得しています。変数classNameには、次の画像のようにnotice is-activeが入ります。

複数のclassは空白区切りの文字列で返る

1つの要素に複数のclassが付いていても、attr('class')の返り値は配列ではありません。HTMLに書かれたclass全体が、空白を含む1つの文字列として返ります。

class名を1つずつ扱いたい場合は、空白で分割します。連続した空白にも対応しやすいよう、正規表現/\s+/を使うのがポイントです。

jQuery(function ($) {
  const className = $('.notice').attr('class') || '';
  const classList = className.trim().split(/\s+/);

  console.log(classList);
  // ['notice', 'is-active']
});

|| ''は、class属性がないときのundefinedを空文字へ置き換えるための記述です。これにより、後続のtrim()でエラーになるのを防げます。

特定のclassがあるかはhasClass()で確認する

class名を取得した後に文字列を比較するより、「この要素にis-currentがあるか」を知りたいだけならhasClass()が適しています。

<nav>
  <a class="menu-item is-current" href="#">ホーム</a>
  <a class="menu-item" href="#">お問い合わせ</a>
</nav>

jQuery(function ($) {
  $('.menu-item').each(function () {
    const hasCurrentClass = $(this).hasClass('is-current');
    console.log($(this).text(), hasCurrentClass);
  });
});

hasClass('is-current')は、classがあればtrue、なければfalseを返します。class名の前にドットを付けず、'is-current'と書く点に注意してください。

複数要素のclass名をeach()で取得する

$('.card').attr('class')のように複数の要素を選んでも、取得できるのは基本的に先頭要素のclass属性だけです。すべての要素を調べる場合はeach()で1つずつ処理します。

<article class="card card-news">ニュース</article>
<article class="card card-guide is-featured">学習ガイド</article>
<article class="card card-column">コラム</article>

jQuery(function ($) {
  $('.card').each(function () {
    const className = $(this).attr('class');
    console.log(className);
  });
});

each()内のthisは、現在処理しているHTML要素です。$(this)と書くことでjQueryオブジェクトに変換し、attr()を使えるようにしています。

classが未設定のときはundefinedになる

対象要素にclass属性がない場合、attr('class')は文字列ではなくundefinedを返します。値を画面表示や文字列処理に使うなら、先に確認しておくと安全です。

jQuery(function ($) {
  const className = $('#target').attr('class');

  if (className === undefined) {
    console.log('class属性は設定されていません');
    return;
  }

  console.log(className);
});

なお、セレクターに一致する要素そのものがない場合も、取得結果はundefinedです。HTMLのclass名とjQuery側のセレクターが一致しているかも確認してください。

class名を取得できないときの確認ポイント

セレクターのドットを忘れている

classで要素を選ぶときは、class名の前にドットが必要です。一方、attr()やhasClass()の引数にはドットを付けません。

// 正しい書き方
$('.notice').attr('class');
$('.notice').hasClass('is-active');

// 間違いやすい書き方
$('notice').attr('.class');
$('.notice').hasClass('.is-active');

HTMLより先にjQueryを実行している

対象要素が作られる前に処理を実行すると、要素を選べません。今回のコードのようにjQuery(function ($) { ... });で囲むと、HTMLの読み込み後に処理できます。

WordPressで$ is not a functionと表示される

WordPressでは、他のライブラリとの衝突を避けるため、そのままでは$を使えない場合があります。次の形で囲むと、囲みの中では安全に$をjQueryとして使えます。

jQuery(function ($) {
  const className = $('.notice').attr('class');
  console.log(className);
});

取得後にclassを追加・削除したい場合

classの追加にはaddClass()、削除にはremoveClass()、付け外しにはtoggleClass()を使います。attr('class', 'new-class')でも変更できますが、既存のclassをまとめて上書きするため、追加だけならaddClass()が安全です。