コンテンツへスキップ
ホーム » [jQuery].each()とthisを使って要素ごとに繰り返し処理を行う。

[jQuery].each()とthisを使って要素ごとに繰り返し処理を行う。

  • by

繰り返し処理のサンプルコードを作ってみました。
span要素とa要素を含むli要素があったとして、li要素ごとにa要素の中にspan要素を移動させる、というような動作をさせます。繰り返しさせるために.each()を使います。

jQuery

jQuery(function(){

	jQuery('li').each(function(){
		var url = jQuery('a',this); //liの子要素のa要素を取得し、変数にセットする。
		jQuery('span',this).prependTo(url); //liの子要素のspan要素を変数urlの要素の内側先頭にに移動する。
	});

});

html

<ul>
	<li>
		<span>hoge1</span>
		<a href="">:リンク</a>
	</li>
	<li>
		<span>hoge2</span>
		<a href="">:リンク</a>
	</li>
	<li>
		<span>hoge3</span>
		<a href="">:リンク</a>
	</li>
	<li>
		<span>hoge4</span>
		<a href="">:リンク</a>
	</li>
	<li>
		<span>hoge5</span>
		<a href="">:リンク</a>
	</li>
	<li>
		<span>hoge6</span>
		<a href="">:リンク</a>
	</li>
</ul>

実行結果(html)


<ul>
	<li>
		<a href=""><span>hoge1</span>:リンク</a>
	</li>
	<li>
		<a href=""><span>hoge2</span>:リンク</a>
	</li>
	<li>
		<a href=""><span>hoge3</span>:リンク</a>
	</li>
	<li>
		<a href=""><span>hoge4</span>:リンク</a>
	</li>
	<li>
		<a href=""><span>hoge5</span>:リンク</a>
	</li>
	<li>
		<a href=""><span>hoge6</span>:リンク</a>
	</li>
</ul>

demo

実際の動作は以下のデモページよりご覧いただけます。
eachデモ

まとめ

jQuery(‘a’,this)とすることで”li要素の子要素のa”を取得し、それを変数”url”に入れる。
次にjQuery(‘span’,this)→li要素の子要素のspanを指定して、.prependTo(url)→変数urlに入ってるaの中に入れるよ。でもって.each()でくくってるからli要素無くなるまで繰り返すよ、というような理解でいいと思います。

参考URL

jQuery の $().each() で個別処理(ループ) | バシャログ。

【jQuery】要素を指定するセレクタの使い方 まとめ | Web制作会社スタイル

コメントをどうぞ!