[jQuery]find()メソッドで偶数(奇数)の要素を取得するサンプル

カテゴリー:
jQuery

以下の様に複数のul要素があるhtmlの構成で、それぞれのulごとに内包するli要素の偶数番目(0から数えて)にclassを付けたかったので、jQueryのevenセレクタを使ってやってみました。

サンプルコード

html

css

jQuery

以下に挙げる失敗例のように、findセレクタ無しだとul要素ごとじゃなく、全部のli要素を合算した上で偶数にclassを付けてしまいます。

findセレクタを使うと意図どおりにclassがつきました。
find()は指定した要素の「子孫」要素でセレクタにマッチする要素を選択することができます。

jQuery失敗例

※ちなみに、0から数えて奇数番目にclassを付けたい場合はoddセレクタを使います。

demo

※上記コードの実行結果を閲覧できます。
demo-find.html

参考:jQuery リファレンス:find

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です