jQueryで普通にif文を使った条件分岐のやり方です。指定したタグやクラス名があった場合や、子要素にそれがあったりした時の処理の振り分けなんかをやりたかったんですが、思ったようにならなかったので調べてみました。で、いくつか見つかったのでメモがてら記事にしてみることにします。
条件分岐の時に使えそうなメソッド
条件によって処理を振り分けることはプログラムを書く上でとても重要な感じがするので、使う頻度も結構ありそうな感じです。
hasClassを使ってクラス名を指定する
hasClassメソッドを使えばクラス名を取得することができます。これを使ってsampleというid名の中にtextというクラス名がある時とない時の処理の振り分けてみます。
JavaScript
$(function(){
if($('#sample').children().hasClass('text')) {
$('p').text('見つかりました');
} else {
$('p').text('見つかりませんでした');
}
});
HTML
<div id="sample">
<div class="text">
<p>サンプルです</p>
</div>
</div>
#sampleの中にtextというクラスがあるので実行結果は「見つかりました」になります。
ではこの場合はどうなるでしょうか。
$(function(){
if($('#sample').children().is('p')) {
$('p').text('見つかりました');
} else {
$('p').text('見つかりませんでした');
}
});
上記では#sampleの子要素はtextというクラスになるので実行結果は「見つかりませんでした」になります。で、先祖要素である#sampleから直接p要素をあるかどうか指定したい場合は「#sample *」と指定すると、#sample配下すべてを調べてくれます。
$(function(){
if($('#sample *').children().is('p')) {
$('p').text('見つかりました');
} else {
$('p').text('見つかりませんでした');
}
});
これで実行すると「見つかりました」になります。便利ですね。以下のサイトが参考になりました。
jQueryでCSSクラス名を判別して条件分岐させる方法【追記】 | BlackFlag
isメソッドで条件分岐してみる
上記はクラス名を指定した分岐でした。じゃあタグやid名とかはどうするかというと、isメソッドを使うことで可能になります。
JavaScript
$(function(){
if($('#sample').children().is('#text')) {
$('p').text('見つかりました');
} else {
$('p').text('見つかりませんでした');
}
});
HTML
<div id="sample">
<div id="text">
<p>サンプルです</p>
</div>
</div>
先程はtextがクラス名だったのに対し、今度はid名にしてみました。これで実行してみると「見つかりました」になります。もちろんid名だけじゃなくてクラス名でもタグなんかも指定可能です。これは結構使い勝手がありそうですね。
先程のhasClassと同様に#sampleに半角+アスタリスクで、先祖要素からも探すことができます。
$(function(){
if($('#sample *').children().is('p')) {
$('p').text('見つかりました');
} else {
$('p').text('見つかりませんでした');
}
// 実行結果：見つかりました
});
lengthをつける
lengthをつけることでも条件分岐をすることができます。
JavaScript
$(function(){
if($('#sample').children('.text').length) {
$('p').text('見つかりました');
} else {
$('p').text('見つかりませんでした');
}
});
HTML
<div id="sample">
<div class="text">
<p>サンプルです</p>
</div>
</div>
これもシンプルで使いやすそうな感じですね。単純にHTML文書全体からtextというクラス名があるかどうかで処理を振り分けたい時はこんな感じになります。
$(function(){
if($('.text').length) {
$('p').text('見つかりました');
} else {
$('p').text('見つかりませんでした');
}
});
分かりやすいですね。
まとめ
ということでjQueryで条件分岐するやり方は探せば結構あるもんですね。まだ他にも色々ありそうな感じです。もし間違った部分やこうした方がいいといった部分があったら指摘してくれるとてもとうれしいです。以上、jQueryの条件分岐でした。
