*

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

公開日: : 最終更新日:2015/08/28 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セレクターは指定したセレクターで
最初または最後に登場する要素だけを選択できます。

実行結果はこちらです。

スポンサードリンク

関連記事

catejQuery

他の要素を包む

指定した要素を追加するのではなく、 指定した要素を包むこと(ラップ)ができます。 各要素を指

記事を読む

jQuery

jQueryで聖剣伝説に出てくるリングメニューを作ってみる

タイトルの通り、聖剣伝説で登場する円状に広がるリング状のメニューを今回紹介します。 サンプルコード

記事を読む

catejQuery

フォーカスが外れたことを感知する。

前の記事のfocus()とは逆に、フォーム部品から フォーカスが外れた(選択されていない状態になっ

記事を読む

catejQuery

クリックしたことを感知するclick()

click()命令はready()と同様に、括弧内のfunction(){...}と記述し その内

記事を読む

catejQuery

ボタンを回転させて表示する。

ブラウザの上部からぶら下がっているボタンです。スクロールが停止した後、一定時間おいて回転しながら現れ

記事を読む

jQuery

マウスのホイールを使って画像の切替を行う

タイトルの通りです。マウスのホイールをいじると画像が切り替わるjQueryの機能を作成してみました。

記事を読む

catejQuery

設定されたイベント処理を消す

設定されているイベント処理を取り消すには off()命令を使います。 $( セレクター ).

記事を読む

catejQuery

フォームの部品の値を取得したり変更する命令

フォームを操作する専用の命令がval()です。 この命令を使用すると、フォームに入力または、選択さ

記事を読む

catejQuery

独自のアニメーションを指定する animate()

animate()命令は、任意のCSSプロパティの 値を徐々に変更して、独自のアニメーションを作成

記事を読む

catejQuery

イベント発生時に一度だけ処理を行うone()

この命令は、指定した要素で発生したイベントに対して、 一度だけ実行する処理を設定します。 o

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑