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>
サンプルコード: 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