【jQuery・js】祖先要素・親要素・子要素・兄弟要素の取得

[公開] 2024-07-19 / [更新] 2024-08-22

jQueryでは、自身との関係で他の要素を選択するメソッドが色々用意されています。
よく利用するメソッドを一覧にまとめてみました。

以下のhtmlを元に記載しています

HTML code

<div class="ancestor">
  <ul class="parent">
    <li class="li-1">…</li>
    <li class="li-2">…
      <ul class="child">
        <li class="child-li">…</li>
      </ul>
    </li>
    <li class="li-3">…</li>
    <li class="li-4">…</li>
  </ul>
</div>

jQuery

メソッド	構文	説明	取得要素
`closest()`	`$('.child').closest('.ancestor`‘)	直近の指定祖先要素	`ancestor`
`parents()`	`$('.child').parents();`	上の階層(親・祖先)の全要素	`li-2, parent, ancestor`
`parent()`	`$('.child').parent()`	親要素	`li-2`
`children()`	`$('.parent').children('li')`	子要素`(li)`	`li-1, li-2, li-3, li-4`
`find()`	`$('.parent').find('li')`	全ての子(孫)要素`(li)`	`li-1, li-2, li-3, li-4, child-li`
`siblings()`	`$('.li-2').siblings()`	自身を除く兄弟要素	`li-1, li-3, li-4`
`next()`	`$('.li-2').next()`	直後の要素	`li-3`
`nextAll()`	`$('.li-2').nextAll()`	自分より後ろの兄弟要素	`li-3, li-4`
`prev()`	`$('.li-3').prev()`	直前の要素	`li-2`
`prevAll()`	`$('.li-3').prevAll()`	自分より前の兄弟要素	`li-1, li-2`

JavaScript

jQueryメソッド	構文	説明
`closest()`	`const child = document.querySelector('.child'); let ancestor = null; if (child) { ancestor = child.closest('.ancestor'); }`	直近の指定祖先要素
`parents()`	`const child = document.querySelector('.child'); let parents = []; if (child) { let currentElement = child.parentElement; while (currentElement) { parents.push(currentElement); currentElement = currentElement.parentElement; } }`	上の階層(親・祖先)の全要素-配列
`parent()`	`const child = document.querySelector('.child'); const parent = child ? child.parentElement : null;`	親要素
`children()`	`const parent = document.querySelector('.parent'); const children =` `Array.from(parent.children).` `filter(child => child.tagName === 'li');`	子要素`(li)`・配列
`find()`	`const parent = document.querySelector('.parent'); const children = parent.querySelectorAll('li');`	全ての子(孫)要素`(li)`
`siblings()`	`const element = document.querySelector('.li-2'); const siblings = Array.from(element.parentNode.children). filter(child => child !== element);`	自身を除く兄弟要素
`next()`		直後の要素
`nextAll()`		自分より後ろの兄弟要素
`prev()`		直前の要素
`prevAll()`		自分より前の兄弟要素