【jQuery入門】親子、兄弟要素の間を行き来する

prev/prevAll/next/nextAll/siblings/parent/parents/childrenメソッドを使って、現在の要素を基点として要素を取得する

<div id="family">
  祖父
  <div>
    父
    <div>兄</div>
    <div>姉</div>
    <div id="me">私
      <div>ポチ
        <div>タマ</div>
      </div>
    </div>
    <div>弟</div>
    <div>妹</div>
  </div>
</div>

$(function () {
  $("#me")
    .css("font-weight", "bold") // id="me"の要素を太字に
    .prev()
    .css("background-color", "pink") // 直前の兄要素の背景をピンクに
    .end() // カレント要素を元の位置に
    .prevAll()
    .css("color", "blue") // 全ての兄要素を青文字に
    .end() // カレント要素を元の位置に
    .next()
    .css("background-color", "yellow") // 直後の弟要素の背景を黄色に
    .end() // カレント要素を元の位置に
    .nextAll()
    .css("color", "red") // すべての弟要素を赤文字に
    .end() // カレント要素を元の位置に
    .siblings()
    .css("font-style", "italic") // すべての兄弟要素をイタリック体に
    .end() // カレント要素を元の位置に
    .parent()
    .css("border", "solid 1px red") // 親要素を赤枠で囲む
    .end() // カレント要素を元の位置に
    .children()
    .css("font-size", "x-small"); // すべての子要素のフォントサイズを最小に
});

See the Pen
jQuery8-7 by shinjiezumi (@sezumi)
on CodePen.

jQueryオブジェクトが指す対象は変化するend/addBlockメソッド

jQueryオブジェクトは操作対象の要素(群)を保存している

もっとも、jQueryオブジェクトで保存している内容は不変ではない

prev/prevAll, next/nextAll, siblings, parent/parents, childrenなどのメソッドを呼び出すとjQueryオブジェクトが指す要素も変化する

jQueryオブジェクトが指している要素(群)が変わってしまった場合、元の状態を戻す役割を持つのがendメソッド。

メソッドチェーンとendメソッドとを組み合わせることで、特定の要素とその周辺を行き来するような操作もシンプルなコードで記述できる。

また、addBackメソッドを利用することで、状態をもとに戻すのではなく、「現在の要素セットに一つ前の状態の要素セットを追加」することもできる

endメソッドであれば、単に直前の状態に戻すだけであるのに対して、addBackメソッドは直前の状態を現在の状態に追加している

<ul id="list">
  <li id="js">Javascript</li>
  <li id="jquery">jQuery</li>
  <li id="css">CSS</li>
</ul>

$(function () {
  $("#list")
    .children()
    .css("background-color", "#ffc")
    .addBack()
    .css("border", "solid 1px red");
});

See the Pen
jQuery9-1 by shinjiezumi (@sezumi)
on CodePen.

えず

東京でフリーランスのWebエンジニアやっています。今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。当面の目標はDevOps寄りのオールラウンダー。