jQuery

【jQuery】クラスが存在するかを確認する(hasClass)

本記事では、jQueryでクラスが存在するかを確認する方法について解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

hasClassの使い方

jQueryでクラスが存在するかを確認するには、hasClassを使用します。使い方は以下のとおりです。

$("要素").hasClass("クラス名");
hasClassの使い方
  • 要素:クラスが存在するか確認したい要素
  • クラス名:確認したいクラス名

hasClassは、実行されたタイミングで対象要素に指定したクラスが存在していれば「true」を返し、クラスが存在していなければ「false」を返します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p class="sample">サンプル1</p>
    <p>サンプル2</p>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script src="index.js"></script>
  </body>
</html>
$(function () {
  $("p").each(function (index, elem) {
    index++;
    if ($(elem).hasClass("sample")) {
      console.log(`${index}つ目のpタグにsampleクラスは存在します。`);
    } else {
      console.log(`${index}つ目のpタグにsampleクラスは存在しません。`);
    }
  });
});

上記のサンプルコードは、pタグを2つ用意しており1つ目のpタグにはクラス「sample」を付与させ、2つ目のpタグには何もクラスを付与させていません。

これでhasClassを使用して、pタグがsampleクラスを持っているかを確認します。

コンソールの結果
コンソールの結果

コンソールの結果を確認すると、「1つ目のpタグにsampleクラスは存在します。」「2つ目のpタグにsampleクラスは存在しません。」と表示されているので、正しくクラスの存在確認が出来ていることが確認出来ます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村