Mill's Note

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

/

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()自分より前の兄弟要素