JS jQueryでクラスの判定

2020-05-11

jQueryでidやclassを指定して、記述する場合がほとんどですが、ある指定したclassがあるかどうかを判別する方法として、hasClass()というメソッドがあります。
例えば、<div>がいくつかあり、‘red’というclassがある部分に対して、動作させるという場合、下記のように記載します。

<div class="box">サンプル</div>
<div class="box red">サンプル</div>
<div class="box">サンプル</div>
<div class="box red">サンプル</div>
<div class="box blue">サンプル</div>

$('div').on('click',function(){
	if($(this).hasClass('red')){
		$(this).css('color','red');
	}
});

$('div').on('click',function(){

if($(this).hasClass('red')){

$(this).css('color','red');

}

});

と記述すると、<div>をクリックした時に、‘red’というclassがある場合、文字が赤くなります。

lengthプロパティ

また別の方法として、length というプロパティを使用します。こちらは、メソッドではないため、()がつきません。

if($('.red').length){
	$('.red').css('color','red');
}

if($('.red').length){

$('.red').css('color','red');

}

と、このように、記述すると‘red’というclassがある要素の文字色を赤くすることができます。個人的には、こちらのlengthプロパティをよく使用しています。