シンプルウェイ制作班|WEB制作スタッフブログ

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を使いこなす

2011年07月04日

jqueryを使ってサイト制作をすることが多いのですが、書き方には注意が必要です。
jqueryはhtmlソースを記述に従って検索していき、マッチしたものに処理を行う、ということを行いますが、
うまく書いてあげないと、検索時間がかかりページの表示が遅くなってしまう、ということが起こります。

jqueryの高速化で参考になるのがこちらのサイトです。
こちらのページに高速化の手法が詳しく説明されています。



上記のサイトを見て、なるほど、とhtml,jqueryの理解が深まるとおもいますが、これを踏まえたうえでhtmlやjqueryを記述するときに気をつけることを挙げてみたいと思います。

1. htmlを記述するとき、1回しかでてこないクラスは#IDにする。
2. jqueryではできるだけ$(タグ.クラス名)で記述する。
3. 同じセレクタを何度も書かない。
4. thisをうまくつかう。

4のthisについては、上記サイトではあまり触れられていませんが、うまく使うとかんたんな記述でいろいろな処理ができます。

それでは、最近制作した中でjqueryをつかった具体的な例を1つご紹介します。



この例では、左側のリストを、jqueryをつかって文字数の長いものはリストの下に持ってきて1行で表示し、短いものは2段組みで表示する、というものです。
動作についてすべて説明すると長くなってしまいそうなので、ここでは文字数の長いものを下に持ってくるために、まず要素の大きさ(複数行になっているため、横幅と高さ)の取得をし、リストになっている要素が大きいもには class="long" をつけ、短いものには class="short" をつける、という部分だけを取り上げてjqueryで書いてみます。


1:$('dl.sfc ul.leftColumn li').each(function(){
2: var mywidth = $("a", this).width();
3: var myheight = $("a", this).height();
4: var mylength = mywidth + myheight;
5: if (mylength < 138) {
6: $(this).addClass("short");
7: }
8: if (mylength >= 138) {
9: $(this).addClass("long");
10: }
11:});

簡単に解説すると、
1行目で"dl.sfc ul.leftColumn li"要素を検索します。見つかったら、それぞれの要素($thisで参照する)で以下の処理を行います。
まず、見つかった要素の子要素”a”の高さ、幅を取得します(2行目)。
幅と高さから大きさを求め、その大きさがここでは138より小さい時は、いま検索された"dl.sfc ul.leftColumn li"に”short”というクラスを付けます(5-7行目)。
138以上なら"long"というクラスを付けます(8-10行目)。

ここではクラスを付けるところまでですが、たとえばclass="long"の背景を黄色にしたい、などというときは、

(1)
8: if (mylength >= 138) {
9: $(this).addClass("long").css('background', 'yellow');
10: }

のように赤色部分を追加します。

(2)
8: if (mylength >= 138) {
9: $(this).addClass("long");
9+:$(this).css('background', 'yellow');
10: }

のようには書くこともできますが、高速化を考えるとあまりいい記述ではないので、(1)のように記述するのがおすすめです。

jQueryを導入する

2011年05月10日

最近、弊社制作でjQueryを使っていないサイトは、ほとんどありません。
とにかく、導入が簡単なのが魅力キラキラ
また、(X)HTMLとCSS、ちょっとしたJavaScriptが書けるなんて方は、
色々いじくり倒せると思いますパンチ

jQuery

導入は、jQueryのホームページからファイルをダウンロードして
HTMLに記述して読み込ませるのもいいのですが、
おすすめは「Google AJAX API」を使って読み込む方法グッド

-【ここから】---------------------------------------

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5");</script>

-【ここまで】---------------------------------------

上記2行をHTMLの<head>~</head>内に記述すると、
jQueryのホームページから
ダウンロードしてきたファイルを読み込ませるのと同じことが可能です。


また、おすすめするのは"1.5"という部分パンチ
この部分はjQueryのバージョンを指定している部分で、
"1"や"1.5.1"のようにバージョンを指定できます。

"1"を指定した場合、最新のバージョンの"1.6.0"が
"1.5"を指定した場合、1.5で最も新しいバージョンの"1.5.2"が読み込まれます。
(2011年5月10日現在)

新しいバージョンが出たら、自動的にそのバージョンを読み込ませることができます笑



取り敢えず、jQueryを始めてみようと思う方、これが第一歩です!


※jQueryのプラグインを使用する場合、特定のバージョンでないと動かなくなることもあります。

writer : @


過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 27人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ