2015年6月10日水曜日

(jQueryの学習)要素の指定(セレクタ)あれこれ <順序系フィルタ>

本日は基本的な順序系のフィルタの利用法を学びます。

セレクタにより取得した要素の集合体に対して、
指定した位置(最初や最後、位置指定)の要素を取り出すときに利用します。

●要素の指定方法(順序系フィルタ)

【サンプルソース】


15.要素の集合体から、最初の要素を取り出す

  $(".unordered-list-class span:first")
指定した要素の集合体の中で、最初に登場する要素が対象となります。
<<<サンプルはこちら>>>

16.要素の集合体から、最後の要素を取り出す

  $(".unordered-list-class span:last")
指定した要素の集合体の中で、最後に登場する要素が対象となります。
<<<サンプルはこちら>>>

17.要素の集合体から、偶数番目の要素を取り出す

  $(".unordered-list-class span:even")
指定した要素の集合体の中で、偶数番目に登場する要素が対象となります。
<<<サンプルはこちら>>>

18.要素の集合体から、奇数番目の要素を取り出す

  $(".unordered-list-class span:odd")
指定した要素の集合体の中で、奇数番目に登場する要素が対象となります。
<<<サンプルはこちら>>>

19.要素の集合体から、n番目の要素を取り出す

  $(".unordered-list-class span:eq(2)")
指定した要素の集合体の中で、n番目(サンプル:3番目)に登場する要素が対象となります。
※Index指定のため、「2」を指定すると「3番目」が該当する。
<<<サンプルはこちら>>>

20.要素の集合体から、n番目より前の要素を全て取り出す

  $(".unordered-list-class span:lt(2)")
指定した要素の集合体の中で、n番目(サンプル:3番目)より前に登場する要素が対象となります。
※Index指定のため、「2」を指定すると「3番目」が該当する。
<<<サンプルはこちら>>>

21.要素の集合体から、n番目より後の要素を全て取り出す

  $(".unordered-list-class span:gt(2)")
指定した要素の集合体の中で、n番目(サンプル:3番目)より後に登場する要素が対象となります。
※Index指定のため、「2」を指定すると「3番目」が該当する。
<<<サンプルはこちら>>>

いかがでしょうか?
順序や位置に関連したフィルタの使い方を学びました。
次回は取り出した要素の内容を意識したフィルタを学びます。

それでは、また。
Previous Post
Next Post

post written by: