jQueryでクリック要素のクラスをカンタン取得！サンプルコード付きで徹底解説

2024-04-20

jQueryでクリックされた要素のクラスを取得する方法

方法1： this オブジェクトを使用する

この方法は、最もシンプルでよく使われる方法です。 this オブジェクトは、イベントが発生した要素自身を指します。以下のコード例では、クリックされた要素のクラスを取得し、コンソールに出力しています。

$(document).ready(function(){
  $("button").click(function(){
    var className = $(this).attr("class");
    console.log(className);
  });
});

方法2： event.target プロパティを使用する

この方法は、this オブジェクトの代わりに、event.target プロパティを使用して、クリックされた要素を取得する方法です。以下のコード例は、方法1と同様の処理を行っていますが、event.target プロパティを使用しています。

$(document).ready(function(){
  $("button").click(function(event){
    var className = event.target.className;
    console.log(className);
  });
});

補足

上記のコード例では、ボタン要素がクリックされた時の処理を記述していますが、他の要素でも同様の方法でクラスを取得できます。
クリックされた要素に複数のクラスが設定されている場合は、スペース区切りで取得されます。
取得したクラス情報を使用して、要素のスタイルを変更したり、他の処理を実行したりすることができます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでクリックされた要素のクラスを取得</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <button class="btn-primary">ボタン1</button>
  <button class="btn-success">ボタン2</button>
  <button class="btn-info">ボタン3</button>

  <script>
    $(document).ready(function(){
      $("button").click(function(){
        var className = $(this).attr("class");
        console.log(className);
      });
    });
  </script>
</body>
</html>

JavaScript

上記コードを実行すると、各ボタンをクリックした際に、そのボタンのクラス名がコンソールに出力されます。

説明

HTML部分では、3つのボタン要素を作成しています。それぞれのボタンには、btn-primary、btn-success、btn-infoというクラスが設定されています。
JavaScript部分では、jQueryの ready() 関数を使用して、DOMがロードされた後に処理を実行しています。
$("button") セレクタで、すべてのボタン要素を選択します。
click() イベントハンドラを設定し、ボタンがクリックされた際に処理を実行します。
$(this).attr("class") で、クリックされた要素のクラス属性を取得します。
取得したクラス名は console.log() でコンソールに出力されます。

このサンプルコードを参考に、ご自身の用途に合わせてアレンジしてみてください。

このサンプルコードでは、単純な例のため、エラー処理などは考慮されていません。実用的なコードを作成する場合は、必要に応じてエラー処理を追加するなど、適切なコーディングを行ってください。
クリックされた要素のスタイルを変更したり、他の処理を実行したりするには、取得したクラス情報を使用して、必要な処理を記述する必要があります。

jQueryでクリックされた要素のクラスを取得するその他の方法

closest() メソッドは、指定されたセレクタに一致する最近祖先要素を取得します。このメソッドを使用して、クリックされた要素から親要素を辿り、目的のクラスを持つ要素を取得することができます。

$(document).ready(function(){
  $(".container").on("click", "button", function(){
    var className = $(this).closest(".target-class").attr("class");
    console.log(className);
  });
});

上記のコード例では、.container 要素内の button 要素がクリックされた際に、その要素から .target-class クラスを持つ最近祖先要素のクラスを取得し、コンソールに出力しています。

$(document).ready(function(){
  $("button").click(function(){
    var classNames = [];
    $(this).parents().each(function(){
      if ($(this).hasClass("target-class")) {
        classNames.push($(this).attr("class"));
      }
    });
    console.log(classNames);
  });
});

上記のコード例では、button 要素がクリックされた際に、その要素からすべての祖先要素を繰り返し処理し、.target-class クラスを持つ要素があれば、その要素のクラスを取得して配列 classNames に格納し、コンソールに出力しています。

$(document).ready(function(){
  $(".container").on("click", "button", function(){
    var className = $(this).siblings().filter(".target-class").attr("class");
    console.log(className);
  });
});