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

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。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>


 

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

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

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


 

例2:要素内に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’});
}
});
});


 

例3:要素内に<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の便利なセレクターまとめ記事を書きましたので合わせて参照して頂ければ幸いです。