（jQueryの学習）要素の指定（セレクタ）あれこれ ＜その他＞

本日でセレクタの学習も最後になります。
最後は「特殊な指定方法」や「代替手段」を学びます。

●要素の指定方法（その他）

【サンプルソース】

37.その要素自体を取り出す

  $(this)

ここでは下のボタン押下をハンドリングしていて、
この状態で[this]を指定すると、押したボタン自体の情報が得られます。
※ボタンの値属性(value)を表示しています。

＜＜＜サンプルはこちら＞＞＞

38.親要素を取り出す

  $(this).parent()

親属性を取り出します。
引数なしでは親要素全体が取り出され、引数ありでは指定した要素のみが取り出されます。
なお、ここでは↑と同じく下のボタン押下をハンドリングしていますので、
この状態で[this]を指定すると、押したボタン自体の情報が得られます。

＜＜＜サンプルはこちら＞＞＞

39.子要素を取り出す

  $("#unordered-list2").children("p")

子属性を取り出します。
引数なしでは子要素全体が取り出され、引数ありでは指定した子要素のみが取り出されます。

＜＜＜サンプルはこちら＞＞＞

40.全ての子孫要素の中から条件付で要素を取り出す

  $(this).parent().find("input")

全ての子孫要素の中から、条件に一致する要素を取り出します。
処理中の要素集合に対して、一部の要素のみ指定するときに便利です。
ここでは、
『[this]（ボタン要素）⇒[parent()]（親要素）⇒子孫要素全体』を取り出した後、
findに指定した条件で絞り込んでいます。

＜＜＜サンプルはこちら＞＞＞

41.次の要素を取り出す

  $("h5").next();
  $("#unordered-list1").next();
  $("#unordered-list2").next();

指定した要素のすぐ隣の要素（兄弟要素）のみを取り出します。
次以降の要素全体を取り出す場合は「nextAll()」を使います。

＜＜＜サンプルはこちら＞＞＞

42.兄弟要素を全て取り出す

  $("#list-item2").siblings();

指定した要素のすぐ隣の要素（兄弟要素）のみを取り出します。
次以降の要素全体を取り出す場合は「nextAll()」を使います。

＜＜＜サンプルはこちら＞＞＞

いかがでしょうか？
8回に渡ったセレクタの学習は今回で終了です。
セレクタを使いこなすことで、
いろいろな要素を簡単に取り出すことができそうですね。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share