jQuery isの利用方法 – 条件式を満たす場合に要素を操作 – Change the elements if the condition is satisfied

どうもこんにちは。toshikuraです。今日のtipsは【jQuery isの利用方法 – 条件式を満たす場合に要素を操作】です。今回のtipsはjQueryを触る上で重要な部分かと思いますので、復習がてらメモしておきたいと思います。

jQuery is

条件を満たした場合にtrueを返します。if文やeachを使う際にはお世話になるかと思います。

HTML例

<ul id="ex">
	<li class="one">class="one"</li>
	<li class="two">class="one two"</li>
	<li class="three">class="three"</li>
	<li class="one">class="one"</li>
	<li class="two">class="two"</li>
	<li class="three">class="three"</li>
	<li class="one">class="one"</li>
	<li class="two">class="two"</li>
	<li class="three"><strong>class="three"</strong></li>
</ul>

　

例１：要素内にclass名「one」があった場合

この方法を使うと「class=”one”」で指定されたliのみ変更を実施できます。

$(function(){
	$(‘#ex’).find(‘li’).each(function(){
		if ($(this).is(‘.one’)){
			$(this).css({‘color’:’#f00′});
		}
	});
});

　

例２：要素内にclass名「two」があった場合

例1で指定された要素以外から「class=”two”」で指定されたliの変更ができます。

$(function(){
	$(‘#ex’).find(‘li’).each(function(){
		if ($(this).is(‘.one’)){
			$(this).css({‘color’:’#f00′});
		}else if($(this).is(‘.two’)){
			$(this).css({‘font-size’:’30px’});
		}
	});
});

　

例３：要素内に<strong></strong>を持つ要素があった場合

例1,2で指定された要素以外から<strong></strong>を持つliの変更ができます。

$(function(){
	$(‘#ex’).find(‘li’).each(function(){
		if ($(this).is(‘.one’)){
			$(this).css({‘color’:’#f00′});
		}else if($(this).is(‘.two’)){
			$(this).css({‘font-size’:’30px’});
		}else if($(this).is(‘:has(strong)’)){
			$(this).css({‘font-size’:’50px’});
		}
	});
});

以上になります。各種ステータスに応じた連動型のフォームの制作や色々なステータスを抱える記事一覧ページ等で活用できそうですね。また合わせて「:has()」などのjQueryの便利なセレクターまとめ記事を書きましたので合わせて参照して頂ければ幸いです。