jQuery入門 | 要素の探索 | 上位要素の探索 .parents() .closest()

上位要素の探索

DOMツリーで特定要素の親要素を含む上位要素を探索するためのメソッドは次のとおりである。

メソッド	説明
.parent()	選択した要素の親要素を選択する。
.parents()	選択した要素の上位要素をすべて選択する。
.parentsUntil()	選択した要素の上位要素のうち、指定したセレクターに該当する要素の直前までの要素をすべて選択する。
.closest()	選択した要素を含む上位要素のうち、指定したセレクターに該当する要素の最初の要素を選択する。

.parent()メソッドは、選択した要素の親要素を選択する。このとき、セレクターを引数として渡すことで、渡されたセレクターに該当する親要素だけを選択することもできる。

次のようなHTML要素があるとき、

<div>div（祖父）
  <ul>ul（親）
    <li>li（子）
        <span>span（孫）</span>
    </li>
  </ul>
</div>

<ul>要素の親要素を選択し、その要素のCSSスタイルを変更する。

$("ul").parent().css({"border": "2px solid red"});

.css()メソッドは、選択した要素に引数として渡されたスタイルを設定する。

.parents()メソッドは、選択した要素の上位要素をすべて選択する。このときセレクターを引数として渡すことで、渡されたセレクターに該当する上位要素だけを選択することもできる。

<ul>要素の上位要素のうち、<div>要素をすべて選択し、その要素のCSSスタイルを変更する。

$("ul").parents("div").css({"border": "2px solid red"});

.parentsUntil()メソッドは、選択した要素の祖先要素のうち、渡されたセレクターに該当する要素の直前までの要素だけをすべて選択する。このときセレクターを引数として渡さなければ、.parent()メソッドと同じように、選択した要素の祖先要素をすべて選択する。

<li>要素の上位要素のうち、最初の<div>要素の直前までの要素をすべて選択し、その要素のCSSスタイルを変更する。

$("li").parentsUntil("div").css({"border": "2px solid red"});

.closest()メソッドは、自分自身を含む上位要素のうち、渡されたセレクターに該当する要素の集合から最初の要素を選択する。このメソッドの要素探索方式は.parents()メソッドと似ているが、その要素の上位要素だけでなく、その要素自身も含めて探索する点が異なる。

次のようなHTML要素があるとき、

<div>div（祖父）
  <ul>ul（親）
    <li class="me">li（子）
        <span>span（孫）</span>
    </li>
  </ul>
</div>

classが"me"の要素自身と上位要素のうち、最初の<li>要素を選択し、その要素のCSSスタイルを変更する。

$(".me").closest("li").css({"border": "2px solid red"});

この例では、選択したclassが"me"の要素が<li>要素であるため、自分自身だけCSSスタイルが変更される。