スポンサーリンク
スポンサーリンク

jQueryのセレクター1 odd/even/first/lastセレクター

jQuery

CSSの箇所でselectorを取り上げましたが、
jQuery独自のセレクターがあるので
何回かに分けて紹介します。

odd/evenセレクター

セレクターの中から奇数番目に出てくる要素をoddセレクター
偶数番目に出てくる要素をevenセレクターで指定します。

注意しなければいけないのが、javaScriptでは、
数字は「0」から数えます。
最初の要素は「1」ではなく「0」です。

ロシアの都市のリストを書いていて、
偶数番目のリストではピンク、
奇数番目のリストでは黄色を背景に指定しています。

CSSで、nth-child擬似クラスというものがありますが、
これとの違いはnth-child擬似クラスが共通の親要素を持つ
要素から奇数または偶数番目の要素を選ぶのに対して、
even/oddセレクターは指定したセレクターから偶数または
奇数番目に出てくる要素を選択できる点に違いがあります。

first/lastセレクター

セレクターの中から初めの要素をfirstセレクター、
最後の要素をlastセレクターで指定できます。

サンプルコードを見て、実行するとわかるますが、
日本の都市の一覧が表示されます。
そして一番最初の都市の「1.東京」が赤くなり
最後の都市の「2.鹿児島」が水色になっています。

CSSで、first-child擬似クラスとlast-child擬似クラスが
あり違いが分かりにくいと思います。

first-child/last-child擬似クラスが共通の親要素を持つ要素から
最初または最後の要素を選ぶのに対して、

first/lastセレクターは指定したセレクターで
最初または最後に登場する要素だけを選択できます。

実行結果はこちらです。

コメント

タイトルとURLをコピーしました