[jQuery] 親・子・孫要素を取得する

2019-08-022019-12-07JavaScriptjQuery

ある要素からみて親、子、孫などの要素を取得する方法。
親要素取得は、 parent() , parents() , closest() メソッド、子要素取得については、 children() , find() メソッドを使った方法をメモ。

親要素の取得方法

parent()

1 つ上の階層にある要素を取得するメソッド。（ 1 階層上の要素しか取れない）

<div id="parent" class="par">
    <div id="child"></div>
    <button id="btn">Get Elements</button>
</div>

$('#btn').on('click', function() {
  console.log($(this).parent().attr('id'));   // line 1
  console.log($("#child").parent().attr('class'));  // line 2
});
// console 表示
parent
par

line 1 の $(this) は、押したボタン自身の要素を取得していて、ボタンから見た親要素の id を取得（ attr('id') で id を取得）。
line 2 は、　id="child" の div 要素から見て親である id="parent" の div 要素のクラス名を取得している（ attr('class') で class を取得）。

parents()

対象要素から見て、上にある全階層の要素（祖先要素）の中から目的の要素を取得することができる。

<div id="parent1" class="par">あいう
  <div id="parent4" class="par">abc</div>
  <div id="parent2" class="par">
    <div id="parent3" class="par">
        <div id="child"></div>
        <button id='btn'>Get Elements</button>
    </div>
  </div>
</div>

$('#btn').on('click', function() {
  console.log($(this).parents().attr('id'));  // line 1
  console.log($(this).parents('#parent1').attr('id'));   // line 2
  console.log($(this).parents('#parent1').text());  // line 3
  console.log($('#child').parents());  // line 4
});
// console 表示
parent3   // line 1
parent1   // line 2
// line 3
あいう
  abc
        Get Elements
// line 4
n.fn.init(5) [div#parent3.par, div#parent2.par, div#parent1.par, body, html, prevObject: n.fn.init(1), context: document]
0: div#parent3.par
1: div#parent2.par
2: div#parent1.par
3: body
4: html
context: document
length: 5
prevObject: n.fn.init [div#child, context: document, selector: "#child"]
__proto__: Object(0)

line 1 は、 id を取得しているが、目的の要素を指定しない場合は、一番最初に見つかった要素の id が返ってくる。
line 2 は、 $(this) （ボタン）からみて 3 つ上の階層の id="parent1" を取得している。 parents() は、引数に目的の要素を指定することができる。
line 3 は、 3 つ上の階層のの div 要素（ id="parent1" ）からテキストを取得したところ、 id="parent1" 以下全てのテキストが取得された。
line 4 のように、 parents() 以降にメソッドを繋げないと、上階層の全要素（ body や html タグを含む）を取得することができる。ただし、 id="child" からみて親ではない id="parent4" は取得できない。

closest()

一番近くにいる親要素を取得する。

<div id="parent1" class="par">あいう
  <div id="parent4" class="par">abc</div>
  <div id="parent2" class="par">
    <div id="parent3" class="par">
        <div id="child"></div>
        <button id='btn'>Get Elements</button>
    </div>
  </div>
</div>

$('#btn').on('click', function() {
  console.log($(this).closest("div"));
  console.log($(this).closest('div').attr('id'));
  console.log($(this).closest('#parent2').text());
  console.log($('#child').closest("div").attr('id'));
});
// console 表示
div#parent3.par // line 1
parent1   // line 2
        Get Elements	// line 3
child   // line 4

line 4 のように、対象要素と同じ要素を引数に指定すると自分が返ってくる。

要素の存在確認

.length や .size() を用いて、要素が存在するかどうか確認することができる。
これらの戻り値は、取得した要素のインデックス数であり、 0 が返ってきた場合は、存在しなかったと判断できる。

console.log($(this).closest('div').length);
console.log($(this).parent('div').length);
console.log($(this).parents('div').length);
console.log($(this).closest('div').size());
console.log($(this).parent('div').size());
console.log($(this).parents('div').size());
// console 表示
1
1
3
1
1
3

子要素の取得方法

children()

1 つ下の階層までの子要素を取得する。

<div id="parent">
  <div id="chld1" class="children">子要素1</div>
  <div id="chld2" class="children">子要素2</div>
  <div id="chld3" class="children">
    <div id="chld4" class="children">
      <button id='btn'>Get Elements</button>
      <div id="chld5" class="children">
        子要素5
      </div>
    </div>
  </div>
</div>

$('#btn').on('click', function() {
  console.log($(this).children('div').attr('id'));
  console.log($('#parent').children('div'));
  console.log($('#chld4').children('div'));
});
// console 表示
undefined    // line 1
div#chld1.children, div#chld2.children, div#chld3.children    // line 2
div#chld5.children

line 1 について、 $(this) であるボタン要素には子要素が存在しないので undefined となった。
line 2 について、 id="parent" の子要素を取得し、孫要素である id="chld5" は取得されていない。

find()

対象要素より下にある全ての階層の要素（子要素、子孫要素）を取得することができる。

<div id="parent">
  <div id="chld1" class="children">子要素1</div>
  <div id="chld2" class="children">子要素2</div>
  <div id="chld3" class="children">
    <div id="chld4" class="children">
      <button id='btn'>Get Elements</button>
      <div id="chld5" class="children">
        子要素5
      </div>
    </div>
  </div>
</div>

$('#btn').on('click', function() {
  console.log($(this).find('div').length);
  console.log($('#parent').find('div'));   // line 2
  console.log($('#chld4').find('*'));   // line 3
});
// console 表示
div#chld1.children, div#chld2.children, div#chld3.children, div#chld4.children, div#chld5.children
button#btn, div#chld5.children

line 2 では、 children() と異なり、子孫要素である id="chld4" 、 id="chld5" の div 要素を取得している。
line 3 のように、引数にアスタリスク( * ) を指定すると、配下に存在する全ての要素を取得することができる。