こんばんは。@nyagihimeです。
リストなんかのスタイルを書くときに1行おき(1要素おき)に色を変えたりしたい場合、
oddとかevenを使いますが、どっちがどっちなのか毎回わからなくなります。
それを簡単に覚える方法というのを教えてもらいましたので,もうちょっと自分が覚えやすいようにアレンジしたものをメモっておきます。
覚え方
やり方は簡単で、純粋に文字数を数えればOK。
- oddは3文字、3は2で割り切れないので「奇数」
- evenは4文字、4は2で割り切れるので「偶数」
これだけです。
ついでにいうと、
「きすう」も3文字、「ぐうすう」も4文字なので、そもそも偶数と奇数でどっちがどっちかわからなくなった場合もやっぱり文字数を数えればOKですね。
リスト以外でも「.odd」「.even」みたいなクラスを使えばテーブルやDIVも交互に色を替えたりできるので便利です。
yuga.jsというライブラリをつけるとさまざまな要素に自動的にこのクラスを付けてくれるので楽みたいですよ。
自分で使う機会はまだありませんが,たまに引き継いだ案件なんかで入ってるのを見かけたりします。
おまけ
yuga.jsはいろんな機能がありますが,ただでも、evenとoddの判定だけなら、自力で頑張れないかな?と思って少し考えてみました。
特に気になるところは無いと思いますが、こんなかんじです。
1 2 3 4 5 6 7 |
$('.EO,.EO tbody').children().each(function(i){ if(i % 2 == 0) { $(this).addClass('even'); } else { $(this).addClass('odd'); } }); |
「%」は%を挟む左の値を右の値で割った余りを求める演算子です。
foo = 3 % 2なら余り1なので fooは1、 4%2なら余りは0ですので foo は0となりますので、この結果を利用すれば偶数と奇数の判定に使えますね。
判定したい要素の親に起動用クラス(今回は.EOにしました)をつけておけばこのクラスの子に対して.evenとか.oddをつけてくれます。
追記
…が。このままだと実際につくクラスは even と odd が逆になってしまうので修正する必要があります。詳しくは改めて記事を書きました。
(ここまで)
ただし、tableの時だけちょっと注意が必要で、そのままだと正しく取得することができません。
jQueryのchildrenは指定した要素の直下の子要素のみを取得してくれますが、tableタグの子は実は「tr」ではなく、「tbody」や「thead」といったタグなんですね。省略してもOKなので省略してしまうことが多いですが、その場合ブラウザは自動的に「tbody」を補完してくれます。
そのため、tableタグに対してchildren()を使ってもtrタグは取れないのですね。
なので、tableの場合は、「$(‘.EO’).children()」ではなく、「$(‘.EO tbody’).children()」とすれば tr を選択出来ます。
自分はここでしばらく嵌りました。
まぁ,でもなんというか,既に誰かが作業を楽にするための便利なライブラリを作ってくれているならば,それをありがたく使わせてもらうのが一番いい気はしますねw
では,おやすみなさい。
コメントする