jQueryで取得した、配列に格納された要素それぞれに対して関数を実行する
jQueryで複数個ある要素を取得し、それぞれに対して関数を実行するjavascriptを記述します。
やりたいこと
HTML
1 2 3 4 5 6 7 8 | <section class='hoge'> <div class='piyo'></div> <div class='fuga'></div> </section> <section class='hoge'> <div class='piyo'></div> <div class='fuga'></div> </section> |
上記コードのpiyoが読み込まれたら、fugaに対して処理を実行するというjavascriptを書きたいと思います。
eachを使って処理をする
eachを使って繰り返し処理をします。
javascript
1 2 3 4 5 6 7 8 9 | $('.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を使う)
1 2 3 4 5 6 7 8 9 | $('.hoge').each( function(index,element){ var piyo = $(element).find('.piyo'); var hoge = $(element).find('.hoge'); piyo.ready(function(){ hoge.fadeOut(); }); } ); |