芝生やDIY等のライフハックやWeb制作情報を発信するメディア

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

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

まとめ

自由のソースコードがいじれない場合などに重宝します。「特定の要素が存在する時だけ何かを行う」といった処理は応用が利くので、ぜひテクニックの一つとして覚えておくとよいです。

「Web」の他の記事を読む

ページの先頭に戻る