jQueryで要素のクラスに存在しているクラスをチェックする

DSC09272

2014年02月21日(金)

簡単なTipsを紹介します。jQueryってとても便利だけどこんなのもあるんだ!ってのが結構あって、知っている人がかなりお得感満載だから取りこぼしがないように覚えたいね。まぁ俺は作業ベースで覚えていくのが好きだからドキュメントとか教科書はあまり使わないからそう思うだけかもしれないが。

 

hasClass(class)

なにができるかというと、セレクタで指定した要素にこのhasClassで引数に渡すクラス名が存在しているかチェックしてくれるなんともすぐれた関数なのだ。

戻り値

Boolean: 指定したクラスを持っている要素が1つ以上存在する場合はtrue。存在しない場合はfalse。

 

使い方例

以下のように、存在していたらクラスを削除。存在していなかったらクラスを追加。みたいな形でつかうシーンが多いかな。

削除とか追加とかの処理はあくまで例なので各々で各処理を入れ込んでもらえばよいで。

if ( $(target.element).hasClass('event') ) {
 // 削除
 $(target.element).removeClass('event');
}
else {
 // 追加
 $(target.element).addClass('event');
}

 

例で作ったものは、機能的にはトグルのような機能になります。
参考までに関数を使ったトグルの場合も記述しておきましょう。

 

トグル関数を使う場合

トグルだったら以下のようになると思います。

$(target.element).toggle(
 function(){
 // 追加
 $(this).addClass('chosen');
 },
 function(){
 // 追加
 $(this).removeClass('chosen');
 }
);

みたいな。。。

 

まぁ、jQueryを使うなら色々な関数を覚えたほうが得だけど、本質的な考え方って結局関数使わないでできる事だと思うので、便利な関数に満足しないで、とりあえず自分のあたまで実装イメージをたててから使うようにしよう。その方が、色々と使いまわすときに理解している分もっと効果的な方法が出来ると思うよ。

 

 

 

スポンサードリンク

運営サービスPR

スポンサードリンク

運営サービスPR