jQuery Logo ラップ集合の管理

作成日：2018年3月10日

ラップされた要素集合の管理

jQuery が定義するメソッドから操作できる、「マッチした要素の集合」を jQuery ラッパー、またはラップ集合（wrapped set）と呼んだりします。

メソッドチェーン

jQuery オブジェクトが提供するメソッドの多くは、戻り値として自分自身（jQuery オブジェクト）を返します。メソッド・チェーンとは、この性質を利用して、複数のメソッドをドット演算子（.）で繰り返し呼び出すことを言います。

例えば、p 要素の先頭と最後に strong 要素を挿入する場合、以下のように２つに分けて書くことができます。

$("p").prepend("<strong>先頭へ挿入</strong>");
$("p").append("<strong>末尾へ挿入</strong>");

このように記述すると、jQuery はいったん p 要素を探し prepend() を実行し、次にまたp 要素を探し append() を実行するため、p 要素を2回も探しに行き、効率が良くありません。

同じスクリプトをメソッドチェーンを使って書くと、以下のようになります。

$("p").prepend("<strong>先頭へ挿入</strong>").append("<strong>末尾へ</strong>");

このように記述することで、１つのセレクタに対して２つ以上の命令を連続して実行でき、内部的な処理も効率が良くなります。

同一のセレクタに対して複数の命令を指定する場合は、メソッドチェーンで記述するようにします。

ラップ集合のサイズの取得

length/size()

jQueryのラップされた要素郡は、ラップされた要素の数を含む length プロパティを持っているので、それを使えば簡単に要素の数を調べることができます。

また、プロパティではなくメソッド を使いたいときのために、jQuery は size() メソッドも定義していて、これも length プロパティと同じ情報を返します。

※ size() メソッドは jQuery 1.8 で非推奨になり、jQuery 3.0 で削除（廃止）になりました。 

var p_count = $("p").length;
var p_count2 = $("p").size(); 
alert("length: " + p_count + " / size(): " + p_count2);
<p>jQuery</p>
<p>PHP</p>
<p>WordPress</p>

var p_count = $("p").length;
var p_count2 = $("p").size();
alert("length: " + p_count + " / size(): " + p_count2);

jQuery

PHP

WordPress

ラップ集合の要素の取得

get(), eq(),first(), last()

get() メソッド

get() メソッドは指定した要素のうち、引数に指定されたインデックス番号の要素（DOM 要素）を取得します。取得した要素は、JavaScript オブジェクト（DOM 要素）で、jQuery オブジェクトではありません。

jQuery ではラップ集合を JavaScript の配列と同様に扱えるので、単純な配列のインデックスを使って位置を指定することにより、ラップされたリストに 入っているどの要素でも取得できます。例えば、ページ上の alt 属性を持つ全ての img 要素の集合から、その最初の要素を取得するには、 次のように書きます。

var imgElement = $('img[alt]')[0];

上記で取得した要素は、JavaScript オブジェクト（DOM 要素）で、jQuery オブジェクトではありません。したがって jQuery のメソッドやプロパティは使用できません。

もし配列のインデックスではなくメソッドを使いたければ、get() メソッドを使用します。

var imgElement = $('img[alt]').get(0);
  • get() メソッドのパラメータ（引数）には取得する要素のインデックス（数値：最初の要素のインデックスは 0）を指定します。
  • インデックスが省略されたら、集合全体を配列に入れて返えします。但し、配列を取得するには後述の toArray() メソッドを使うほうが良いとされています。
  • 負のインデックス値も指定でき、その場合は、ラップ集合の末尾からの相対位置によって要素を取り出します。 get(-1)は最後の要素になります。

eq() メソッド

get() メソッドは1個の DOM 要素を返しますが、特定の要素の jQuery オブジェクト（ラップ集合）が必要なときもあり、その場合、次のように 書くのは無駄が多いです。

$($('p').get(23)) 
//$('p').get(23)で要素を取得してそれを$()でラップ

eq() メソッドは、ラップ集合の中でインデックスで指定された要素を取得し、その要素だけを含む新しいラップ集合を返します。

get()と同じように、負のインデックス値を指定すると、 集合の末尾からの相対位置を指定できます。

first(), last() メソッド

first() メソッドは、ラップ集合にある最初の要素を取得し、その要素だけを含む新しいラップ集合を返します。

last() メソッドは、ラップ集合にある最後の要素を取得し、その要素だけを含む新しいラップ集合を返します。

$("p").eq(1).css('color', 'red');  //2番目の要素
$("p").eq(-2).css('color', 'blue');  //最後から2番目の要素
$("p").first().css('color', 'orange');  //先頭の要素
$("p").last().css('color', 'green');  //最後の要素
<p>jQuery</p>
<p>PHP</p>
<p>WordPress</p>
<p>JavaScript</p>

$("p").eq(1).css('color', 'red');

$("p").eq(-2).css('color', 'blue');

$("p").first().css('color', 'orange');

$("p").last().css('color', 'green');

jQuery

PHP

WordPress

JavaScript

配列の要素の全取得 toArray()

ラップ集合の全要素を DOM 要素の JavaScript 配列として取得するには、toArray()メソッドを使用します。

var all_p_array = $('p').toArray();
//全ての p 要素の JavaScript 配列を変数に代入

以下は全ての p 要素の JavaScript 配列に含まれる要素の個数をアラート表示させる例です。ここで使用されている length プロパティは JavaScript のプロパティになります。

alert($('p').toArray().length);

要素のインデックスの判定

index()

eq() が与えられたインデックスの要素を返すのに対して、index() はラップ集合の中で、特定の要素のインデックスを判定するのに使用します。

もし要素が見つからなければ -1を返します。

var p_index = $("p:contains('PHP')").index();
//PHP という文字列を含む p 要素のインデックスを変数に代入
<p>jQuery</p>
<p>PHP</p>
<p>WordPress</p>

alert($("p:contains('PHP')").index());

jQuery

PHP

WordPress

ラップ集合への要素の追加

add()

add() メソッドを使うことにより、いくつものセレクタをチェーンして要素の和集合（union）を作ることができます。

$("p[title]").add("p:has(span)").css('color', 'red');
//title属性を持つ全ての p 要素に、span 要素を持つ全ての p 要素を加えてスタイルを指定

//以下でも同じ結果が得られる
$("p[title], p:has(span)").css('color', 'red');
<p title="jQuery">jQuery</p>
<p>PHP</p>
<p><span>Word</span>Press</p>
<p><em>MySQL</em></p>

$("p[title]").add("p:has(span)").css('color', 'red');

$("p[title]").add("p:has(span)").add("p:has(em)").css('color', 'bleu');

jQuery

PHP

WordPress

MySQL

add() メソッドは既存の要素をラップ集合に追加できるだけでなく、HTML マークアップを含む文字列を渡すことによって新しい要素も追加できます。

ラップ集合の内容の絞込み

ラップ集合の内容の削減 not()

セレクタに not() メソッドをチェーンすることで、例外を設けることが可能です。

これは :not フィルタセレクタと同じ機能を持ちますが、add() メソッドと同様に jQuery のメソッドチェーンのどこにでも入れることができ、柔軟にラップ集合から要素を削除することができます。

ページ上の p 要素で title 属性のあるものを全て集めたいけれど、title 属性の値に "php" というテキストが含まれるものは除外したい場合、 :not フィルタを使って 以下のように1個のセレクタでも作れます。

$('p[title]:not([title*=php])')

not() を使って、 次のように書くことができます。

$('p[title]').not('[title*=php]')

パラメータにもし関数が渡されたら、 ラップ集合のそれぞれのアイテムについて、（this をそのアイテムとして）関数を呼び出し、呼び出しの結果として true が返された場合、 その要素をラップ集合から削除します。

$('p').not(function(){
  return !$(this).hasClass('keepMe');
}).css({color: 'purple', fontWeight: 'bold'});

この式は、いったん全部の p 要素を選択し、その中から keepMe クラスを持たない要素だけを削除します。この場合 hasClass() メソッドは jQuery のメソッドなので this をラップ集合に変換するため $() で囲んでいます。

<p class="keepMe" title="jquery">jQuery</p>
<p title="php">PHP</p>
<p title="wordpress">WordPress</p>
<p class="keepMe">MySQL</p>

$('p[title]').not('[title*=php]').css('color', 'orange');

$('p').not(function(){return !$(this).hasClass('keepMe');}).css({color: 'purple', fontWeight: 'bold'});

jQuery

PHP

WordPress

MySQL

要素の絞込み filter()

filter() はパラメータで指定された要素にマッチしたもののみを返します。not() の反対のような働きをします。

パラメータが jQuery セレクタなら それにマッチしない要素は削除されます。

$("selector1").filter("selector2");　　
//「selector1」にマッチした要素を、「selector2」で絞り込む。

ページ上の p 要素で title 属性のあるものを全て文字色をオレンジにして、更に title 属性の値に "php" というテキストが含まれるものは filter('[title*=php]') で抽出して文字色を赤くするには以下のように書きます。

$('p[title]').css('color', 'orange').filter('[title*=php]').css('color', 'red');

もし関数が渡されたら、ラップ集合のそれぞれのアイテムについて（this をそのアイテムとして）関数を呼び出し、呼び出しの結果として false が返された場合、その要素をラップ集合から削除します（逆に言うと、true が返された場合、その要素をラップ集合に残します）。

$('p').filter(function(){
    return this.innerHTML.match(/MySQL/);
    //return $(this).text().match(/MySQL/); jQuery の text() を使う場合
}).css({color: 'purple', fontWeight: 'bold'});

この式は、いったん全部の p 要素を選択し、その中から MySQL というテキストを持つ要素のみを選択します。この場合 innerHTML プロパティは JavaScript の プロパティなので this をそのまま使用しています。

jQuery の text() を使用する場合は、 this をラップ集合に変換するため $() で囲みます。

match() は JavaScript の正規表現のメソッドです。

<p class="keepMe" title="jquery">jQuery</p>
<p title="php">PHP</p>
<p title="wordpress">WordPress</p>
<p class="keepMe">MySQL</p>

$('p[title]').css('color', 'orange').filter('[title*=php]').css('color', 'red');

$('p').filter(function(){ return this.innerHTML.match(/MySQL/); }).css({color: 'purple', fontWeight: 'bold'});

jQuery

PHP

WordPress

MySQL

サブセットの取得 slice(), has()

slice() はマッチした集合の連続する部分を含んだ、新しいラップ集合を返します。

$('p').slice(2,5).css('color', 'blue');
//全ての p 要素の中の3番目から5番目のスタイルを指定
  • 第1パラメータ（begin）：スライスに含めるべき最初の要素のゼロを基数とする位置
  • 第2パラメータ（end）：最後の要素のゼロを基数とする位置から1を引いたもの

has() は渡されたセレクタや要素にマッチする子孫を含む要素だけを元のラップ集合から選び、それらを含む新しいラップ集合を作ってそれを返します。

$('p').has("span").css('color', 'red');
//全ての p 要素の中で span 要素を持つもののスタイルを指定

$('p').slice(2,5).css('color', 'blue');

$('p').has("span").css('color', 'red');

jQuery

PHP

WordPress

MySQL

Java

C++

反復処理

要素の変換　map()

map() を使うと jQueryオブジェクトが持つ要素集合を他の値の配列に変換することができます。

map() はマッチした要素に対して繰り返し指定した関数を実行し、その結果をまとめた新しい jQuery オブジェクトを返します。（配列から別の配列を作ります）

この機能を使うと、value や属性、css など様々な値の配列を作ることが出来ます。

map(callback)

ラップ集合の各要素について、それぞれコールバック関数を呼び出し、戻り値を集めて jQuery オブジェクトのインスタンス（jQuery でラップされた配列）を1個作ります。

var arr = $("セレクタ").map(function(index, element){
   return 〜 （処理）
});

コールバック関数の第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が渡され、return 〜で返した値を配列に追加します。

null を返した場合（return null）は何も追加されません。（2つの引数はどちらも省略可能です。）

また、各要素は関数のコンテクスト（this キーワード）として参照できます。

戻り値は、 jQuery でラップされた配列になっているので、普通の並列として扱うには、get() または toArray() を使って変換します。

<p class="jquery">jQuery</p>
<p class="php">PHP</p>
<p>Java</p>
<p class="wp">WordPress</p>

上記のような HTML がある場合、以下のコードは全ての p 要素のクラス属性の値を集めて配列に変換して返します。

コールバック関数が null を返したら、それに対応するエントリは、戻り値の集合の中に含められません。

戻り値を普通の並列として扱うために、get() または toArray() を使って変換します。

var arr = $("p").map(function() {
  return ($(this).attr('class') == undefined) ? null : $(this).attr('class');
}).toArray();
alert(arr);

alert(arr);

jQuery

PHP

Java

WordPress

フォームコントロールのチェックボックスの選択されている値を取得する場合などにも利用できます。

要素の反復処理　each()

マッチした集合の全部の要素のそれぞれについて、渡された関数を呼び出して処理を行います。

  • 渡されたコールバック関数は第一引数に、エレメントセットの中での、ゼロから始まるインデックスを受け取ります。
  • 第二引数には、繰り返し処理中の要素が参照されます。
  • 関数内で戻り値に false を設定した場合、ループはそこで終了します。これは通常の loop 構文における break のような役割のようなものです。
  • 戻り値に true を返した場合は、次のループに処理が移ります。こちらは loop 文の continue のような働きです。
$('.foo').each(function (index, element) {
  ...
});

以下は全ての p 要素を取得して、それぞれについて番号を付ける例です。

$("p").each(function(n) {
    $(this).text((n + 1) + ". " + $(this).text());
});
<p>jQuery</p>
<p>PHP</p>
<p>WordPress</p>

$("p").each(function(n) { $(this).text((n + 1) + ". " + $(this).text()); });

jQuery

PHP

WordPress

関係を用いたラップ集合の取得

jQuery には、ラップされた要素と HTML DOM 内のほかの要素との階層的な関係を利用して要素を選択できるメソッドがあります。

最も近い親要素を選択 closest()

closest() は開始要素から最も近い先祖で、渡された式にマッチ（一致）するものがあれば、それだけを含むラップ集合を返します。

これは一致する親要素があるまで、先祖をさかのぼることを意味します。そして開始要素からから見て、一致するする直近の要素を取得します。

以下は「C++」というテキストを含む p 要素の最も近い先祖の div 要素の背景色を変更します。

$("p:contains('C++')").closest("div").css('background-color', 'red');
<div>
  <p>jQuery</p>
  <p>PHP</p>
  <p>WordPress</p>
</div>

<div>
  <p>Java</p>
  <p>C++ </p>
  <p>Concrete5</p>
</div>

$("p:contains('C++')").closest("div").css('background-color','#F9E5E6');

jQuery

PHP

WordPress

Java

C++

Concrete5

直近の親要素を選択 offsetParent()

指定した要素から先祖方向に調査して position 属性に relative , absolute , fixed のいづれかが設定された直近の要素を選択します。closest() とは異なり、引数を取りません。

オフセットペアレント
相対または絶対の位置決めルールが明示的に設定されている先祖のうち、要素から最も近縁のもの（最も内側のコンテナ）を意味します。言い換えると、position 属性に relative , absolute , fixed のいづれかをもつ直近の親・先祖要素
<div id="outside1" class="pos_relative">
  <div id="outside2">
    <div id="outside3" class="pos_relative">
      <div id="outside4">
        <p><a href="#">sample</a></p>
      </div>
    </div>
  </div>
</div>
.pos_relative {
  position: relative;
}

sample のリンクをクリックすると offsetParent() によって、a 要素の先祖要素から一番近い position が設定された要素を選択します。選択した要素は css() を利用して背景色を設定しています。 

$("#outside4 a").click(function() {
  $(this).offsetParent().css('background-color','#F9E5E6');
})
#outside1 (relative)
#outside2
#outside3 (relative)
#outside4

sample

children()
$(...).children( [セレクタ] )

children() は $(...) で指定した要素の子要素を取得します。

引数を省略すると全ての子要素を選択します。children('セレクタ')のように、引数にセレクタを指定することで、子要素を絞り込むことが可能です。

但し、children() は孫要素を取得しません。つまり、一つ下の階層までしか対象にしません。親要素の直下の要素が子要素（children）になります。

また、children() はテキストノードを除外するため、 テキストノードもコメントノードも対象とする場合は contents() を使用します。

以下の例の場合、$(".outside").children() により選択される要素は、最初の p 要素と クラス inside の div 要素の２つになります。

$(".outside").children().css("color", "red") とすると、クラス inside の div 要素内の要素も文字色が赤になりますが、これはクラス inside の div 要素のスタイルが反映されているためで、それらの要素が選択されているわけではありません。

<div class="wrapper">
  <div class="outside">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    <div class="inside">
      <h3>Title</h3>
      <p>Quos excepturi, rerum, hic sequi rem tenetur aspernatur. </p>
      <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
      </ul>
    </div>
  </div>
  <p><button>Reset</button></p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Title

Quos excepturi, rerum, hic sequi rem tenetur aspernatur.

  • list item 1
  • list item 2
  • list item 3

$(".outside").children().css("color", "red")

$(".outside").children().css("background", "yellow")

$(".outside").children().css("border", "1px solid green")

$(".inside").children().css("color", "blue")

$(".inside").children().css("background", "pink")

$(".inside").children().css("border", "1px solid red")

$(".inside").children("p").css("color", "orange")

contents()
$(...).contents( )

contents() は $(...) で指定した要素の子要素全体（テキストノードを含む）を選択します。子要素の選択には children() も利用できますが、children() はテキストノードを除外します。

また、contents() は children() と異なり、引数を指定できません。

contents() は children() と似ていますが、children() は要素を選択・取得するのに対し、contents() は要素の中のテキスト（ノード）を選択することも可能です。そのため要素の中のテキストを別のタグで囲うこともできます。wrapInner() でも同様の操作は可能です。

また iframe を指定すると iframe の document を選択することができます（但し、同じドメインの場合のみ）。

<div class="outside">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <div class="inside">
    <h3>Title</h3>
    <p>Quos excepturi, rerum, hic sequi rem tenetur aspernatur. </p>
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
    </ul>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Title

Quos excepturi, rerum, hic sequi rem tenetur aspernatur.

  • list item 1
  • list item 2
  • list item 3

$(".outside").contents().css("border", "1px solid red");

$(".inside p").contents().wrap("<strong></strong>");

以下は div 要素内のコンテンツを変更する例です。

<div id="contents_sample2">
  I was looking at stars.<br><br>
  Don't know why.<br><br>
  But the spring was in the air.<br><br>  
</div>
#contents_sample2 p {
  background: #C0C6F6;
}
I was looking at stars.

Don't know why.

But the spring was in the air.

$("#contents_sample2").contents().filter(function() {
  return this.nodeType === 3;
}).wrap( "<p></p>" ).end().filter( "br" ).remove();

上記を実行すると、br 要素を使って改行していたテキストを p 要素でラップし、br 要素を削除します。

まず、ID が contents_sample2 の div 要素のコンテンツを contents() で取得します。

そして filter() でテキストノードを選択し（nodeType === 3 はテキストノードになります）、p 要素でラップします。

end() でコンテンツに戻り、再度 filter() で br 要素を選択して、削除しています。 

<div id="contents_sample2">
  <p>I was looking at stars.</p>
  <p>Don't know why.</p>
  <p>But the spring was in the air.</p>
</div>

以下は iframe のコンテンツを取得して、その中の p 要素と heading 要素（:header）に背景色を指定する例です。

<div id="iframe_sample">
  <iframe src="../samples.html" name=""></iframe>
</div>
var iframe = $("#iframe_sample iframe").contents();
iframe.find("p").css("background-color", "yellow");
iframe.find(":header").css("background-color", "green");

siblings()
$(...).siblings([セレクタ])

siblings() は $(...) で指定した要素の兄弟要素（同じ階層の要素）を選択します。引数にセレクタを指定することで選択する要素を絞り込むことができます。引数を設定しない場合はすべての兄弟要素を選択します。

但し、指定した対象の要素は含まれません。

<div id="next_sample4">
  <h3>Title (h3)</h3>
  <p>sample paragraph</p>
  <ul>
    <li>list item 1</li>
    <li class="target1">list item 2 (.target1)</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li class="target2">list item 5 (.target2)</li>
  </ul>
  <p>sample paragraph</p>
  <p class="target1">sample paragraph (.target1)</p>
  <p class="target3">sample paragraph</p>
</div>

$("#next_sample4 h3").siblings().css("background", "aqua");

$("#next_sample4 p:first").siblings().css("background", "aqua");

$("#next_sample4 li:first").siblings().css("background", "aqua");

$("#next_sample4 h3").siblings(".target1").css("background", "aqua");

$("#next_sample4 li.target1").siblings().css("background", "aqua");

$("#next_sample4 li.target1").siblings(".target2").css("background", "aqua");

Title (h3)

sample paragraph

  • list item 1
  • list item 2 (.target1)
  • list item 3
  • list item 4
  • list item 5 (.target2)

sample paragraph

sample paragraph (.target1)

sample paragraph (.target3)

parent() parents() parentsUntil()

parent()

$(...).parent([セレクタ])

parent() は $(...) で指定した要素の直近の親要素（1つ上の階層である親要素）を取得します。引数にセレクタを指定することで、選択する要素を絞り込むことが可能です。

<div id="parent_sample">
  <h3>Title h3</h3>
  <div class="foo">
    <h4 class="target1">Title h4</h4>
    <p>Sample paragraph</p>
    <p class="target2"><a href="#">Link</a></p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li class="target3"><a href="#">List item 3 (link)</a></li>
    </ul>
  </div>
  <div class="bar">
    <h4 class="target4">Title h4</h4>
    <p>Sample paragraph</p>
    <p class="target5">Sample paragraph<span> (span)</span></p>
  </div>
</div>

$("#parent_sample h3").parent().css("background", "aqua");
h3 の親要素 div#parent_sample が選択されます。

$("#parent_sample h4").parent().css("background", "aqua");
h4 の親要素 div.foo 及び div.bar が選択されます。

$("#parent_sample p.target2").parent().css("background", "aqua");
p.target2 の親要素 div.foo が選択されます。

$("#parent_sample .target2 a").parent().css("background", "aqua");
指定した a の親要素 p 要素が選択されます。

$("#parent_sample li").parent().css("background", "aqua");
li の親要素 ul 要素が選択されます。

$("#parent_sample .target3 a").parent().css("background", "aqua");
指定した a の親要素 li 要素が選択されます。

$("#parent_sample .bar p").parent().css("background", "aqua");

$("#parent_sample .target5 span").parent().css("background", "aqua");
span の親要素 p 要素が選択されます。

$("#parent_sample .target5 span").parent("div").css("background", "aqua");
span の親要素は p 要素ですが、引数に div 要素を指定しているため該当する要素がなく、何も選択されません。

$("#parent_sample .foo p").parent().find("a").css("background", "aqua");
指定した p 要素の親要素 div.foo から find() を使って a 要素を選択します。

Title h3

Title h4

Sample paragraph

Link

Title h4

Sample paragraph

Sample paragraph (span)

parents()

$(...).parents([セレクタ])

parents() は $(...) で指定した要素の直接の親要素を含む「先祖」要素をすべて（body 要素、html 要素を含む）選択します。

引数にセレクタを指定することで、選択する要素を絞り込むことが可能です。

parents() は調査範囲が広い分、parent() よりも負荷がかかります。

closest() を使うと最も近い先祖要素を取得することができます。

<div id="parents_sample">
  <h3>Title h3</h3>
  <div class="foo">
    <h4 class="target1">Title h4</h4>
    <p>Sample paragraph</p>
    <p class="target2"><a href="#">Link</a></p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li class="target3"><a href="#">List item 3 (link)</a></li>
    </ul>
  </div>
  <div class="bar">
    <h4 class="target4">Title h4</h4>
    <p>Sample paragraph</p>
    <p class="target5">Sample paragraph<span> (span)</span></p>
  </div>
</div>

上記のような HTML がある場合、引数を指定しない $(".target5 span").parents() で取得する先祖の要素は「P, DIV, DIV, DIV, DIV, DIV, BODY, HTML」になります。直接の親要素である p 要素、その先祖のいくつかの div 要素、そして body 要素、html 要素が取得されます。（参考：要素名の取得）

var tagnames = "";
$(".target5 span").parents().each(function(){
  tagnames += $(this).prop("tagName") + ", "
});
console.log(tagnames);

$("#parents_sample li.target3").parents("div.foo").css("background", "aqua");
クラス target3 の li 要素の先祖要素のうちクラス foo の div 要素が選択されます。

$("#parents_sample li a").parents(".foo ul").css("background", "aqua");
a 要素の先祖要素のうちクラス foo の div 要素内の ul 要素が選択されます。

$("#parents_sample .target4").parents(".bar, #parents_sample").css("border", "2px solid green");
クラス target4o の先祖要素のうちクラス bar の要素と ID が parents_sample の要素が選択されます。

Title h3

Title h4

Sample paragraph

Link

Title h4

Sample paragraph

Sample paragraph (span)

parentsUntil()

$(...).parentsUntil( [セレクタ/jQobject/DOM] [,フィルタ] )

parentsUntil() は $(...) で指定した要素から先祖方向に走査し「第１引数で指定した要素」とマッチする要素までのすべてを選択します。引数を省略すると指定した要素の先祖要素がすべて選択されます。

第１引数はセレクタの他に jQuery オブジェクトや DOM 要素を指定することができます。

また、第２引数にセレクタを設定することで対象の要素から第１引数で指定した要素までにある要素を絞り込む（フィルタする）ことができます。

<div id="parentsUntil_sample">
  <div class="foobar">
    <h3>Title h3</h3>
    <div class="foo">
      <h4 class="target1">Title h4</h4>
      <p>Sample paragraph</p>
      <p><a href="#">Link</a></p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li><a href="#">List item 3 (link)</a></li>
      </ul>
    </div>
    <div class="bar">
      <h4>Title h4</h4>
      <p>Sample paragraph</p>
      <p>Sample paragraph<span class="target5"> (span)</span></p>
    </div>
  </div>
</div>

$("#parentsUntil_sample li").parentsUntil(".foobar").css("border", "2px solid green");
li 要素の先祖要素のうちクラス foobar までの先祖要素（ul 及びクラス foo の div 要素）が選択されます。クラス foobar の div 要素は含まれません。

$("#parentsUntil_sample li").parentsUntil("div.foo").css("border", "2px solid green");
li 要素の先祖要素でクラス foo の div 要素までの先祖要素（ ul 要素）が選択されます。

$("#parentsUntil_sample .target5").parentsUntil("#parentsUntil_sample").css("border", "2px solid green");
クラス target5 の span 要素の先祖要素で #parentsUntil_sample までの先祖要素（ p 要素、クラス bar と foobar の div 要素）が選択されます。

$("#parentsUntil_sample .target5").parentsUntil("#parentsUntil_sample", ".bar").css("border", "2px solid green");
クラス target5 の span 要素の先祖要素で #parentsUntil_sample までの先祖要素のうちでクラス bar の div 要素が選択されます。

Title h3

Title h4

Sample paragraph

Link

Title h4

Sample paragraph

Sample paragraph (span)

要素の探索・判定

要素の子孫の探索 find()

find() メソッドはラップ集合の要素の子孫を探索して、渡されたセレクタ式にマッチする要素全てを含む新しい集合を返します。

以下は全ての p 要素の中で子孫に a 要素を持つもののスタイルを設定しています。

$("p").find("a").css("color", "red");
<p>jQuery 入門：<a href="#">リンク</a></p>
<p>PHP 入門</p>
<p>WordPress 入門</p>

$("p").find("a").css("color", "red");

jQuery 入門：リンク

PHP 入門

WordPress 入門

このメソッドは、マッチする要素全てを返すので、必要に応じて get(), eq(),first(), last() などと組み合わせて使うことができます。

以下は、div 要素の中の最初の p 要素のみにスタイルを設定する例です。

$("div").find("p").first().css("color", "red");
要素の判定 is()

ラップ集合の要素のどれかが、渡されたセレクタ式にマッチするかどうかを判定します。少なくとも1個の要素が渡されたセレクタにマッチすれば true、そうでなければ false を返します。

以下は全ての ｈ 要素を each() を使って走査して、その中で h4 要素であれば、スタイルを設定しています。

$(":header").each(function(){
  if($(this).is("h4")) {
    $(this).css('color', 'orange');
  }
});
<h3>jQuery</h3>
<h4>PHP</h4>
<h5>WordPress</h5>
<h6>JavaScript</h6>

(":header").each(function(){ if($(this).is("h4")) { $(this).css('color', 'orange'); } });

jQuery

PHP

WordPress
JavaScript

メソッドチェーンの管理

元のラップ集合に適用　end()

あるメソッドを元のラップ集合に適用するにはend()を使用します。言い換えると、直近の何らかのフィルター（抽出・絞込み）を中止（end）して、その前の元のラップ集合に戻ります。

以下の場合、まず全ての p 要素のラップ集合が作成され、その後 title 属性を持つ p 要素のラップ集合が生成されています。元の全ての p 要素のラップ集合に対して処理を行いたい場合は、end() を使用します。

$("p").filter('[title]').css('color', 'orange');

以下のように end()を呼び出すことによって、 元のラップ集合（全ての p 要素を含む集合）に対して、filter('[class]') メソッドが適用されます。

$("p").filter('[title]').css('color', 'orange').end().filter('[class]').css('color', 'blue');
<p title="jquery">jQuery</p>
<p class="sample">PHP</p>
<p title="WP">WordPress</p>

$("p").filter('[title]').css('color', 'orange').end().filter('[class]').css('color', 'blue');

jQuery

PHP

WordPress

end() を使用して状態を戻せるのは、全ての jQuery オブジェクトを返す Traversal 関数と呼ばれる関数で、以下のようなものがあります。

  • add
  • andSelf
  • children
  • filter
  • find
  • map
  • next
  • nextAll
  • not
  • parent
  • parents
  • prev
  • prevAll
  • siblings
  • slice

上記に加えて、Manipulation 関数である clone 関数など次の関数も対象となっています。

  • clone
  • appendTo
  • prependTo
  • insertBefore
  • insertAfter
  • replaceAll
ラップ集合の結合　addBack()

addBack() は現在選択されている要素の集合に、一つ前に選択した要素を追加します。オプションで、セレクタを指定することでフィルタリングすることが可能です。

$("p").filter('[class]').css('color', 'pink').addBack(':has(span)').css('text-decoration', 'underline');

上記ではまず、全ての p 要素を選択して、その中から class 属性を持つものをフィルタしてスタイルを設定しています。そして、addBack() でそれまでに選択されている要素（class 属性を持つ p 要素）に加えて、その1つ前に選択した全ての p 要素の中から span 要素を持つ p 要素に更にスタイルを設定しています。

<p class="sample">jQuery</p>
<p>PHP</p>
<p class="sample">WordPress</p>
<p><span>JavaScript</span></p>
<p>Java</p>
<p><span>C++</span></p>

$("p").filter('[class]').css('color', 'pink').addBack(':has(span)').css('text-decoration', 'underline');

jQuery

PHP

WordPress

JavaScript

Java

C++

jQuery オブジェクトは内部のスタックに、 これまでにマッチ（選択）した要素集合を保持しています。 Traversalメソッドのどれかが呼び出されると、新しい要素集合がスタックに追加され（積み重ねられ）ます。

addBack() や end() はスタックに積み重ねられたこれらの要素集合を操作することができます。

現在選択している要素集合

次に選択した要素集合

最初に選択した要素集合