jQuery vs ネイティブJavaScript：クラス名を取得する

jQueryでクラス名を取得する方法

jQueryを使用すると、HTML要素のクラス名を簡単に取得することができます。クラス名を取得することで、要素のスタイルや挙動を動的に変更したり、特定の条件に合致する要素を操作したりすることができます。

方法

jQueryでクラス名を取得するには、以下の2つの方法があります。

attr() メソッドは、要素の属性を取得するために使用されます。クラス名を取得するには、attr("class") と記述します。

<div class="my-class">This is a div.</div>

// クラス名を取得
const className = $(".my-class").attr("class");

// 結果: "my-class"
console.log(className);

<div class="my-class">This is a div.</div>

// クラス名を取得
const className = $(".my-class").prop("className");

// 結果: "my-class"
console.log(className);

どちらの方法を使用しても同じ結果が得られます。 どちらを使用するかは、コードの読みやすさや好みによって判断してください。

注意点

• クラス名が複数存在する場合、attr() メソッドと prop() メソッドの両方で取得できるのは最初のクラス名のみです。
• 取得したクラス名は文字列型です。

応用例

• 要素に動的にスタイルを適用する
• 特定のクラスを持つ要素を非表示にする
• 特定のクラスを持つ要素をクリックした時の処理を変更する

<div class="my-class first-class">This is a div.</div>

// クラス名を取得
const className = $(".my-class").attr("class");

// 結果: "my-class first-class"
console.log(className);

// 最初のクラス名のみを取得
const firstClassName = $(".my-class").attr("class").split(" ")[0];

// 結果: "my-class"
console.log(firstClassName);

prop() メソッドを使用する

<div class="my-class second-class">This is a div.</div>

// クラス名を取得
const className = $(".my-class").prop("className");

// 結果: "my-class second-class"
console.log(className);

// 最初のクラス名のみを取得
const firstClassName = $(".my-class").prop("className").split(" ")[0];

// 結果: "my-class"
console.log(firstClassName);

クラス名に基づいて要素を操作する

<div class="my-class first-class">This is a div.</div>
<div class="my-class second-class">This is another div.</div>

<button id="btn-change-color">Change Color</button>

$("#btn-change-color").click(function() {
  // クラス名が "my-class" である要素すべての色を変更
  $(".my-class").css("color", "red");

  // クラス名が "first-class" である要素のみを非表示にする
  $(".first-class").hide();
});

このコードは、以下のような動作を実現します。

• "Change Color" ボタンをクリックすると、クラス名が "my-class" であるすべての要素の色が赤色に変わります。
• クラス名が "first-class" である要素は、ボタンをクリックすると非表示になります。

その他のメソッド

• hasClass() メソッド: 要素が特定のクラスを持っているかどうかをチェック
• addClass() メソッド: 要素にクラスを追加
• toggleClass() メソッド: 要素にクラスの追加と削除を切り替え

jQueryでクラス名を取得する他の方法

data() メソッドは、要素にカスタムデータ属性を設定および取得するために使用されます。クラス名をデータ属性として設定しておけば、data() メソッドを使用して取得することができます。

<div class="my-class" data-class="my-class">This is a div.</div>

// クラス名を取得
const className = $(".my-class").data("class");

// 結果: "my-class"
console.log(className);

each() メソッドは、jQueryオブジェクト内の各要素に対して処理を実行するために使用されます。each() メソッドを使用して、要素のクラス名を取得することができます。

<div class="my-class first-class">This is a div.</div>
<div class="my-class second-class">This is another div.</div>

// 各要素のクラス名を取得
$(".my-class").each(function() {
  const className = $(this).attr("class");

  // 結果: "my-class first-class"
  // 結果: "my-class second-class"
  console.log(className);
});

ネイティブJavaScriptを使用する

jQueryを使用せずに、ネイティブJavaScriptを使用してクラス名を取得することもできます。

<div class="my-class first-class">This is a div.</div>

// クラス名を取得
const className = document.querySelector(".my-class").className;

// 結果: "my-class first-class"
console.log(className);