jquery で要素の数を数える
2011年09月12日
べた書きのHTMLではあまりありませんが、システムが絡んだテンプレートなどをつくっていると、あるブロック(要素のかたまり)の数を数えたいときがあります。
たとえば、
ブロック要素の高さを揃える「jquery.flatheights.js」
でも使われています。
使い方についてはいろいろなところで解説されているので省略しますが、使い方はこんな感じですね。
1.$(document).ready(function(){
2. /* dl要素を4つずつの組に分ける */
3. var sets = [], temp = [];
4. $('div.photo dd').each(function(i) {
5. temp.push(this);
6. if (i % 4 == 3) {
7. sets.push(temp);
8. temp = [];
9. }
10. });
11. if (temp.length) sets.push(temp);
12.
13. /* 各組ごとに高さ揃え */
14. $.each(sets, function() {
15. $(this).flatHeights();
16. });
17.});
これは、「div.photo dd」要素の高さを1行づつそろえる、ということをやっていますが、簡単な解説です。
3行目の sets = [], temp[] は配列の初期化宣言です。
ここでは sets配列には各列の要素配列、temp配列には、各ブロックの要素配列が入ります。
4行目の$('div.photo dd')で、この要素をHTMLの中から検索します。
そして、.each でその検索した$('div.photo dd')それぞれの要素についてfunction以下の処理を行います。
また、function(i)となっているので、このfunctionが実行されるごとに i がカウントアップされていきます。
初期値は0です。
まず、$('div.photo dd')の要素を見つけたら、その要素の中身をtemp配列に追加します。
6行目で同じ高さにしたい要素の数を設定します。
ここでは
i % 4 == 3
となっていますが、これは i を 4 で割ったときの余りが 3 になったとき
という計算式です。
i は0から始まるので、4回目のループに入ったときに i=3 になり、この計算式はtrueになりますね。
この6行目のif文がtrueになるまではtempにpushを続けるので、trueになったときには4個の要素がtempに入っていることになります。
そして、if文が実行されたときにsets配列にこのtemp配列の中身がpushされ、tempは初期化されます。
最後に13行目以降でflatheight関数はsets配列の各要素に対して要素の高さを揃える処理をします。
ここではsetsには4ブロック分の要素が入っているので、4要素の高さをそろえることができる、ということです。
まずは難しいことを考えずに、functionに引数をつければ数を数えられるんだ~、ということがわかっているといろいろなところで応用できると思うので、是非使ってみてください。
たとえば、
ブロック要素の高さを揃える「jquery.flatheights.js」
でも使われています。
使い方についてはいろいろなところで解説されているので省略しますが、使い方はこんな感じですね。
1.$(document).ready(function(){
2. /* dl要素を4つずつの組に分ける */
3. var sets = [], temp = [];
4. $('div.photo dd').each(function(i) {
5. temp.push(this);
6. if (i % 4 == 3) {
7. sets.push(temp);
8. temp = [];
9. }
10. });
11. if (temp.length) sets.push(temp);
12.
13. /* 各組ごとに高さ揃え */
14. $.each(sets, function() {
15. $(this).flatHeights();
16. });
17.});
これは、「div.photo dd」要素の高さを1行づつそろえる、ということをやっていますが、簡単な解説です。
3行目の sets = [], temp[] は配列の初期化宣言です。
ここでは sets配列には各列の要素配列、temp配列には、各ブロックの要素配列が入ります。
4行目の$('div.photo dd')で、この要素をHTMLの中から検索します。
そして、.each でその検索した$('div.photo dd')それぞれの要素についてfunction以下の処理を行います。
また、function(i)となっているので、このfunctionが実行されるごとに i がカウントアップされていきます。
初期値は0です。
まず、$('div.photo dd')の要素を見つけたら、その要素の中身をtemp配列に追加します。
6行目で同じ高さにしたい要素の数を設定します。
ここでは
i % 4 == 3
となっていますが、これは i を 4 で割ったときの余りが 3 になったとき
という計算式です。
i は0から始まるので、4回目のループに入ったときに i=3 になり、この計算式はtrueになりますね。
この6行目のif文がtrueになるまではtempにpushを続けるので、trueになったときには4個の要素がtempに入っていることになります。
そして、if文が実行されたときにsets配列にこのtemp配列の中身がpushされ、tempは初期化されます。
最後に13行目以降でflatheight関数はsets配列の各要素に対して要素の高さを揃える処理をします。
ここではsetsには4ブロック分の要素が入っているので、4要素の高さをそろえることができる、ということです。
まずは難しいことを考えずに、functionに引数をつければ数を数えられるんだ~、ということがわかっているといろいろなところで応用できると思うので、是非使ってみてください。