【何気に便利！】連続する要素において、特定の要素が存在する場合のみ処理を行うjs
Web2017年1月25日
先日、連続して繰り返している要素内に、特定の要素が存在する場合のみ処理を行う必要に迫られるシーンがありました。
具体的に言うと、普段は非表示（display:none;）にしている要素をある要素が存在する時だけdisplay:block;にする、という処理になります。本記事ではこの機能を実現するjsについてご紹介したいと思います。
サンプルコード
js
(function () {
$(function() {
$(".繰り返している要素 .item").each(function(){
$(this).find(".特定の要素").parents(".繰り返している要素").find(".表示したい要素").show();
});
});
})(jQuery);- ※jQueryを読み込んでいる場合のスクリプトとなります
html
<div class="繰り返している要素">
<div class="item">
<p class="表示したい要素">特定の要素がある時だけ表示したい要素</p>
</div>
<div class="item">
<p class="表示したい要素">特定の要素がある時だけ表示したい要素</p>
</div>
<div class="item">
<p class="表示したい要素">特定の要素がある時だけ表示したい要素</p>
<div class="特定の要素">特定の要素</div>
</div>
<div class="item">
<p class="表示したい要素">特定の要素がある時だけ表示したい要素</p>
</div>
</div>解説
jQueryの.eachを使って繰り返しの処理を行います。特定の要素をfindでアクセスし、parents()で親要素にアクセスします。あとは表示したい要素を再度findでアクセスしてshow()するだけです。
デモ
実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。
まとめ
自由のソースコードがいじれない場合などに重宝します。「特定の要素が存在する時だけ何かを行う」といった処理は応用が利くので、ぜひテクニックの一つとして覚えておくとよいです。