【何気に便利！】連続する要素において、特定の要素が存在する場合のみ処理を行う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>