以前、偶数・奇数を表すoddとevenの簡単な覚え方という記事を作った時に、
jQueryを使って簡単に偶数奇数の判定を行うみたいなことをおまけでちょっと書いたのですが、
久しぶりにそれを使って even / odd のクラスを自動付与させようと思ったときにふと気がついたので
改めて補足記事を書くことにしました。
よくみたら even と odd が逆に振られていた
久々に例のスクリプトを書いて、even 側に色を付けるようにしたんですが、そこで気が付きました。
あれ?もしかして even と odd 逆じゃね?
で、あらためてスクリプトを見なおしてみる
1 2 3 4 5 6 7 8 9 |
$(function(){ $('.EO').children().each(function(i){ if(i % 2 == 0) { $(this).addClass('even'); } else { $(this).addClass('odd'); } }); }); |
each でループさせて、そのとき function(i) としてインデックスを i に格納して、i を 2 で割る。
その時に余りが 0 なら even で違えば odd クラスを付ける。
うん。あってるな。
じゃあなんで1つめのアイテム(奇数)に even(偶数)のクラスがついてるんだ?どっかで数え間違え??
とおもい、ためしに addClass(‘even’+i) / addClass(‘odd’+i) みたいなかんじで現在のインデックス番号もくっつけるようにしてみましたところなんということでしょう…
1 2 3 4 5 6 7 |
<ul> <li class="even0">no1. Lorem ipsum dolor.</li> <li class="odd1">no2. Lorem ipsum.</li> <li class="even2">no3. Lorem ipsum dolor sit.</li> <li class="odd3">no4. Lorem ipsum.</li> <li class="even4">no5. Lorem ipsum dolor sit amet.</li> </ul> |
インデックス(i)は0から始まってるということを完全に失念しておりました。
jQuery で each したときのインデックスは 0 からはじまる
プログラム系で連番を振ると、0からカウントがスタートするものと1からカウントがスタートするものがあるんですよね…。
で、今回は0からだったと。
そうなると、1個目のリストは見つけた準では「0番目」ということになります。
するとどうなるかというと、 0/2 = 0 となり余りが出ません。よって if(i % 2 == 0) は TRUE となり、1個めが even となってしまいました。
さらにここから1個ずつずれていくので、2個めはインデックス1となり結果は odd 3個目はインデックス2なので結果は even …となり全部逆になってしまうのですね。
今回の場合常に even,odd,even,odd…と2種類の結果を交互に返すだけだったし、偶数か奇数かというよりは、前後と仲間かどうかの判定だけに使っているのでぶっちゃけこのまんまでも動作には問題ないとはおもいます。
.even と .odd で色分けしてたなら、CSS で配色を入れ替えればいいだけですし。
でも、正直、なんか気持ち悪いですよね。
ということで、少し修正してみましょう。
【修正案1】こまけぇことあきにしねー人向け
1 2 3 4 5 6 7 8 9 |
$(function(){ $('.EO').children().each(function(i){ if(i % 2 == 0) { $(this).addClass('odd'); } else { $(this).addClass('even'); } }); }); |
なんというか、完全に開き直ったやり方ですね。
結果が逆に出てくるなら出力を入れ替えろ、ってことですね。
単純明快でいいと思いますが、これあとで見なおしたら、またどっちが even でどっちが odd だかわかんなくなりそうですね。
大急ぎでなんとかしなくちゃならない時はいいと思いますが、できればもう少し何とかしたいものです。
まぁこまけぇことあきにしねーって人はそのままそもそもCSS側入れ替えるとかはじめからそういう仕様だったということにしてしまうかもしれませんが…w
【修正案2】インデックスをずらして利用。
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $('.EO').children().each(function(i){ i = i + 1; if(i % 2 == 0) { $(this).addClass('even'); } else { $(this).addClass('odd'); } }); }); |
受け取るインデックス番号が0から始まる(つまり実際より1少ない)のであれば、判定する際に1足せばいいよね、ってことです。
判定開始前に現在のインデックス番号に1他しちゃいます。
これなら0番目に見つけたアイテムは判定時に 0 + 1 を 2 で割るので、答えは odd、
1番目ならば (1+1) / 2 なんで答えは even。いい感じですね。
でも、もうひと押しくらいあってもいいですよね。
【修正案3】インデックスをずらして利用(ちょっと修正)
1 2 3 4 5 6 7 8 9 |
$(function(){ $('.EO').children().each(function(i){ if((i+1) % 2 == 0) { $(this).addClass('even'); } else { $(this).addClass('odd'); } }); }); |
基本的には【修正案2】と同じですが、そもそも、別の場所で足さないでも判定する時に足せばいいじゃん。ということでできたのがこちら。
じっくり式を読んじゃうとやっぱりインデックスに1足してから割るので odd と even の関係が混乱しそうですが…。まぁ式で思い出すんじゃなくて、前に書いたように文字数で覚えるのが良いと思います。
odd = きすう = 3 / even = ぐうすう = 4
うん。やっぱこれだな。
そんなまとめでいいのかよ…
コメントする