jQueryで取得した、配列に格納された要素それぞれに対して関数を実行する

記事のタイトルとURLをコピー

jQueryで複数個ある要素を取得し、それぞれに対して関数を実行するjavascriptを記述します。

1 やりたいこと
2 eachを使って処理をする
- 2.1 javascript
- 2.2 javascript（findを使う）

やりたいこと

HTML

	<section class='hoge'>
		<div class='piyo'></div>
		<div class='fuga'></div>
	</section>
	<section class='hoge'>
		<div class='piyo'></div>
		<div class='fuga'></div>
	</section>

</section>

</section>

上記コードのpiyoが読み込まれたら、fugaに対して処理を実行するというjavascriptを書きたいと思います。

eachを使って処理をする

eachを使って繰り返し処理をします。

javascript

	$('.hoge').each(
		function(index,element){
			var piyo = $(element).children('.piyo');
			var hoge = $(element).children('.hoge');
			piyo.ready(function(){
				hoge.fadeOut();
			});
		}
	);

$('.hoge').each(

function(index,element){

var piyo = $(element).children('.piyo');

var hoge = $(element).children('.hoge');

piyo.ready(function(){

hoge.fadeOut();

});

}

);

.hogeに対してeachを実行し、each内でpiyoやhogeを取得します。
取得したpiyoに対して関数を実行すると、期待通りの動作になりました。

HTMLの構造上、piyoやhogeにあたるものが子要素ではなく、孫要素より深い階層である場合は、.findを使います。

javascript（findを使う）

	$('.hoge').each(
		function(index,element){
			var piyo = $(element).find('.piyo');
			var hoge = $(element).find('.hoge');
			piyo.ready(function(){
				hoge.fadeOut();
			});
		}
	);

$('.hoge').each(

function(index,element){

var piyo = $(element).find('.piyo');

var hoge = $(element).find('.hoge');

piyo.ready(function(){

hoge.fadeOut();

});

}

);

参考サイト

jQuery：配列の内容を順番に処理するには？（$.each） - Build Insider

記事のタイトルとURLをコピー