ywork2020.com

Title

要素が、指定したクラス名に該当するかを調べる

目次 (INDEX)

hasClassとは

ここで説明するhasClass とは次の語句からなるjQueryのメソッドです。
has
読み: ハズ
意味: have の3人称単数現在形、持っている、所有している
class
読み: クラス
意味: 部類、種類

目次に戻る

hasClassメソッドの概要

このメソッドは、セレクターに該当する要素が、引数に与えた class 属性 の値を持っているかを真偽値で返します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

var boolean = $(Selector).hasClass(strClassName);

目次に戻る

サンプルコードと実行結果

このサンプルでは、div要素をセレクターに指定して、jQueryオブジェクトを取得し、 その要素らが class="clsA" であるかをif文で判定しています。

なお、判定結果が true の要素については背景色をライトブルーに設定します。

サンプルコード: CSS 
<style>
	div{
		border: thin solid currentColor;
		margin: 1em;
		padding: 1em;
	}
</style>
  • 03: border (境界線を設定しています。 細線、実線、ライトグレー)
  • 04: margin (境界線から外周の余白を設定しています。 1文字分の高さで余白をとります。)
  • 05: padding (境界線から内周の余白を設定しています。 1文字分の高さで余白をとります。)
サンプルコード: HTML 
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div class ="clsA">A</div>
	<div class ="clsB">B</div>
	<div class ="clsA">A</div>
</body>
  • 05: div (この要素には、class属性の値に "clsA" が設定されています。)
  • 06: div (この要素には、class属性の値に "clsB" が設定されています。)
  • 07: div (この要素には、class属性の値に "clsA" が設定されています。)
サンプルコード: script 
<script>
	$("div").each(function(){
		if($(this).hasClass("clsA") == true){
			$(this).css({"background-color" : "##lightblue"});
		}
	});
</script>
  • 02: $("div") (このセレクターは、div要素を表しています。)
  • 02-06: each(function(){some processing}) (取得した要素に対して1回ずつ関数を実行します。)
  • 03: if($(this).hasClass("clsA") == true) (div要素が class="clsA" の属性値をもつかを判定しています。)
  • 03, 04: $(this) (thisは、この場合「div要素」のことを指しています。)
  • 04: css() (cssメソッドはスタイルを適用します。)
実行結果:
A
B
A

目次に戻る