小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQueryで親要素・子要素・兄弟要素を取得

  • 公開日：2020-03-25
  • 最終更新日：2020-03-12

jQueryで一定の要素を基準に、上の下層や下の階層の値を取得したり、クラスを変更したりする場合が多くあるので、その際の対象の取得方法をメモ。

取得する対象要素は基準要素と比較して、親子・兄弟要素として設定される。
兄弟要素とは基準要素と比較して並列階層の要素、親・先祖要素は上の階層、子・孫（子孫）要素は下の階層の要素になる。

関数説明
parents()親要素+先祖要素（上位階層の全親要素）を取得
parent()1階層上の親要素を取得
prev()前の兄弟要素（兄）を取得
prevAll()前の全ての兄弟要素（全兄）を取得
next()後の兄弟要素（弟）を取得
nextAll()後の全ての兄弟要素（全弟）を取得
children()子要素を取得
find()子要素+孫要素（子孫要素全て）を取得

HTML

<div>先祖要素
    <div>親要素
        <div>兄要素A</div>
        <div>兄要素B</div>
        <div>自分
            <div>子要素A</div>
            <div>子要素B
                <div>孫要素A</div>
                <div>孫要素B</div>
        </div>
        </div>
        <div>弟要素A</div>
        <div>弟要素B</div>
    </div>
</div>