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

カテゴリー:
jQuery

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

jQuery

html

実行結果(html)

demo

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

まとめ

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

参考URL

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です