jQueryで特定の要素の有無を判別する方法


たまに特定の要素があるかないかで処理を分けたい時とかあったりします。

そんな時に重宝するのが.lengthになります。

1.「.laength」を使用して「#hoge」が存在した時に処理を実行したい場合


$(function(){
	if($('#hoge').length){
		//ここに「#hoge」が存在した時実行したい処理を書く
	}
});

2.「.laength」を使用して「#hoge」が存在した時と存在しなかった時


$(function(){
	if(!($('#hoge').length)){
		//ここに「#hoge」が存在しなかった時実行したい処理を書く
	}
});

3.「.laength」を使用して「#hoge」が存在した時と存在しなかった時

$(function(){
	if($('#hoge').length){
		//ここに「#hoge」が存在した時実行したい処理を書く
	} else {
		//ここに「#hoge」が存在しなかった時実行したい処理を書く
	}
});

他にも数に応じて処理を変える方法として以下のような方法があります。

「.hoge」の中のliタグの数に応じてそれぞれ処理を変える例

$(function(){
	var hoge = $('.hoge');
	$(hoge).each(function(){
		var num = $(this).find('p').length;
		if(num === 1) {
			//「.hoge」の数が1の時に実行したい処理を書く
		} else if(num === 5) {
			//「.hoge」の数が5の時に実行したい処理を書く
		} else {
			//「.hoge」の数が1でも5でもない時に実行したい処理を書く
		}
	});
});

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*