メニュー

東京・小金井市のWEB制作会社の豆知識

MEMORANDUM

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

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

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>

この記事を書いた人

片寄輝生
株式会社衆代表/クリエイター
実務20年。
Web制作全般に携わり、企画・設計から運用まで一貫して対応。
現場で得た知見をもとに、実践的な内容を中心に発信しています。
RANKING

人気記事

同一カテゴリーの記事