Re:Start jQuery #002

概要

jQueryオブジェクトをいろいろいじってみる

イテレート

今回はイテレートするので子要素がわかりやすいulタグを使ってみる。

コンソールには以下のように、子要素が0から4までの5個あると表示される。liが5個なので問題ない。

tmp00152

さて、イテレートしようか。

イテレート

tmp00153

やはりJavaScriptの普通のオブジェクトになる。jQueryオブジェクトではない。
jQueryオブジェクトではないので、当然css()などつけるとエラーになる。

以下のようなエラーになる。

というわけで、このようにする。

jQueryオブジェクトは必ず$をつけるというルールにしておくと、コードリーディングが楽になることがある。

eachを使う

children()で子要素を拾った状態のjQueryオブジェクトを代入しておき、each()でイテレートしてみる。

結果はこのとおり。

tmp00154

結果をjQueryオブジェクトにしてみる。

結果はこのとおり。

tmp00155

結論

jQueryオブジェクトをイテレートするとJavaScriptのオブジェクトになる。
適宜jQueryオブジェクトにしておくと寝覚め良い($をつける、などのルールを適用しておく)。

感想

jQueryオブジェクトをイテレートしてもjQueryオブジェクトであるという先入観があったので、実務で『?』ってなったことが過去にあった。

でもそのまま$()でくくればいいや、的な感覚で進めてきていたので、今回のように調べてみると、改めて再認識できたのでよかったかも。

おっさんなんですぐ忘れちゃいそうだけどね。