if文の使い方いろいろ

個人的によく使っているif文のパターンをまとめてみました。

サンプルコード

要素があるかどうか

HTML

<div id="sample"></div>

JavaScript

$(function() {
	if($('#sample').length) {
		// #sampleがあるときの処理
		alert('#sampleあり');
	} else {
		// #sampleがないときの処理
		alert('#sampleなし');
	}
});

要素があるかどうかのデモページ
　

指定した要素がid/classを持っているか

HTML

<div id="sample" class="sample"></div>

JavaScript

$(function() {
	if($('#sample').hasClass('sample')) {
		// .sampleがあるときの処理
		alert('.sampleあり');
	} else {
		// .sampleがないときの処理
		alert('.sampleなし');
	}

	if($('.sample').attr('id') == 'sample') {
		// #sampleがあるときの処理
		alert('#sampleあり');
	} else {
		// #sampleがないときの処理
		alert('#sampleなし');
	}
});

指定した要素がid/classを持っているかのデモページ
　

要素が表示されているか

HTML

<div id="sample"></div>

JavaScript

$(function() {
	if($('#sample').is(':visible')) {
		// #sampleが表示されている時の処理
		alert('#sample表示');
	} else {
		// #sampleが表示されていない時の処理
		alert('#sample非表示');
	}
});

要素が表示されているかのデモページ
　

CSSの値で判別

HTML

<div id="sample"></div>

CSS

#sample {
	position: relative;
	width: 400px;
}

JavaScript

$(function() {
	if($('#sample').css('position') == 'relative') {
		// position: relative;が指定されている時
		alert('position: relative;が指定されています');
	} else {
		// position: relative;が指定されていない時
		alert('position: relative;は指定されていません');
	}

	if(parseFloat($('#sample').css('width')) < 500) {
		// widthが500未満の時
		alert('widthは500未満です');
	} else {
		// widthが500以上の時
		alert('widthは500以上です');
	}
});

CSSの値で判別のデモページ
　

○の倍数

JavaScript

$(function() {
	for(var i = 1; i < 10; i++) {
		if(i % 3 == 0) {
			// iが3の倍数の時
			console.log(i);
		} else {
			// iが3の倍数でない時
		}
	}
});

○の倍数のデモページ
　

フォーム関連

HTML

<div id="sample">
	<input type="text" value="サンプルテキスト" /><br />
	<select>
		<option value="">選択してください</option>
		<option value="select01" selected>サンプル1</option>
		<option value="select02">サンプル2</option>
	</select><br />
	<input type="radio" name="radio" value="radio01" checked />サンプル01
	<input type="radio" name="radio" value="radio02" />サンプル02
	<input type="radio" name="radio" value="radio03" />サンプル03<br />
	<input type="checkbox" name="checkbox" value="checkbox01" checked />サンプル01
	<input type="checkbox" name="checkbox" value="checkbox02" />サンプル02
	<input type="checkbox" name="checkbox" value="checkbox03" />サンプル03<br />
</div>

JavaScript

$(function() {
	if($('#sample input:text').val()) {
		// inputに値が入っている時
		alert($('#sample input:text').val());
	} else {
		// inputに値が入っていない時
	}

	if($('#sample select').val()) {
		// selectが選択されている時
		alert($('#sample select').val());
	} else {
		// selectが選択されていない時
	}

	if($('#sample input:radio').val()) {
		// radioが選択されている時
		alert($('#sample input:radio').val());
	} else {
		// radioが選択されていない時
	}

	if($('#sample input:checkbox').val()) {
		// checkboxが選択されている時
		alert($('#sample input:checkbox').val());
	} else {
		// checkboxが選択されていない時
	}
});

フォーム関連のデモページ
　

アニメーション中かどうか

HTML

<div id="move"></div>

CSS

#move {
	position: absolute;
	top: 0;
	left: 0;
}

JavaScript

$(function() {
	$('#move').animate({
		top: 500,
		left: 300
	}, 1500);

	if($('#move').is(':animated')) {
		// #moveがアニメーションしている時
		console.log('動いています');
	} else {
		// #moveがアニメーションしていない時
	}
});

アニメーション中かどうかのデモページ

補足：アニメーション中かどうかの判別方法

$(function() {
	// アニメーション中の要素に対する処理
	$('#move:animated').addClass('moving');

	// アニメーションしていない場合に処理
	$('#move').not(':animated').animate({
		left: 300
	});

	// アニメーションしていない場合に処理
	$('#move:not(:animated)').animate({
		left: 300
	});
});

ユーザーエージェント

JavaScript

var ua = navigator.userAgent;
if (ua.indexOf('iPad') > 0 || ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) {
	// スマホ・タブレットの時
	alert('SPかタブレットです');
}else{
	// PCの時
	alert('PCです');
}

ユーザーエージェントのデモページ