jQueryでクラスの判定
2020-05-11
jQueryでidやclassを指定して、記述する場合がほとんどですが、ある指定したclassがあるかどうかを判別する方法として、hasClass()というメソッドがあります。
例えば、<div>がいくつかあり、‘red’というclassがある部分に対して、動作させるという場合、下記のように記載します。
|
1 2 3 4 5 |
<div class="box">サンプル</div> <div class="box red">サンプル</div> <div class="box">サンプル</div> <div class="box red">サンプル</div> <div class="box blue">サンプル</div> |
|
1 2 3 4 5 |
$('div').on('click',function(){ if($(this).hasClass('red')){ $(this).css('color','red'); } }); |
と記述すると、<div>をクリックした時に、‘red’というclassがある場合、文字が赤くなります。
lengthプロパティ
また別の方法として、length というプロパティを使用します。こちらは、メソッドではないため、()がつきません。
|
1 2 3 |
if($('.red').length){ $('.red').css('color','red'); } |
と、このように、記述すると‘red’というclassがある要素の文字色を赤くすることができます。個人的には、こちらのlengthプロパティをよく使用しています。