jQueryの.children()と書き方

水曜日, 7月 1st, 2009

こんにちは、なかわけです。

仕事中にjQueryの書き方がわからなくて後輩に聞いてみた。すぐ返答が来た。

$('ul').each(function(){
    $(this)
        .children('li:odd')
        .addClass('colored');
});

.children()に引数を渡して要素を指定できたんですね。知らなかった。

あと、$(this)のあとにチェーンする場合は、メソッドごとに改行した方が処理が早いんだって。
納得いかない。なんで?

Tags: ,

3 Responses to “jQueryの.children()と書き方”

  1. エスケイ より:

    あー、すいません。伝え方が悪かったんですが、改行したら早いんじゃなくて、
    $(this + ‘ > li’)とするより、$(this)で一回thisをキャッシュしてからチェーンメソッドを書いて、$(this).children(‘li’)とした方が早いという意味で、
    $(this).children(‘li’)と、
    $(this)
    .children(‘li’)
    には速度差はないです。

    わかりにくくてすみません。

  2. なかわけ より:

    あーそうなの。
    その説明はわかったんだけど、それでなんで速くなるのかがわからないね。
    そういうもんって覚えておいた方がよさそうだな。
    コアな部分まで掘り下げると、余計わけわからなくなりそう・・・

  3. ミヤビ より:

    通りすがりですが、
    似たような事を調べててたどり着いたのでレス

    jQueryやCSSで使用しているセレクタは右から調べるそうですね。
    なので$(‘ul li’)とかやっちゃうと、
    HTML内の全てのli要素を調べてからulに合致するものを探そうとするそうです。
    thisの場合は知らないけど、下手な書き方するとそんな感じになるかも?

    なので読みやすさよりパフォーマンスを重要視するならセレクタは1つで、
    絞り込みたい場合には、find()やchildren()、eq()等を使うと覚えておくとよさそうですね。

Leave a Reply

*