jQuery入門 | 要素の探索 | その他の探索メソッド .add() .each() .end() .offsetParent()

Tags:

その他の探索メソッド

DOMツリーで要素の探索に使用されるその他のメソッドは次のとおりである。

メソッド 説明
.add() 選択した要素に別の要素を追加選択する。
.addBack() 選択した要素の集合に、直前に選択していた要素を追加する。
.each() 選択した要素ごとに、渡されたコールバック関数を繰り返し実行する。
.end() 最後に実行したメソッドの実行前の状態へ、選択した要素の集合を復元する。
.offsetParent() DOMツリーに存在する親要素のうち、位置指定された要素を基準に最も近い要素を探して選択する。
.contents() 選択した要素の子要素をすべて選択する。テキストノードとコメントノードもすべて含む。

.add()メソッド

.add()メソッドは、選択した要素に別の要素を追加で選択する。

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

<p>こんにちは。</p>
<span>devkumaです。</span>
<div>よろしくお願いします。</div>

次の例は、<p>要素を探索して選択し、追加で<div>を選択してCSSスタイルを設定する。

$("p").add("div").css({"border": "2px solid green"});

コードを実行

上の例を別の形で表すと次のようになる。

$("p, div").css({"border": "2px solid green"});

注意点

  • .add()メソッドは、選択した要素に別の要素を追加で選択するものであり、新しい要素を追加して挿入するメソッドではない。 新しい要素を追加するときは、.append()、.prepend()などを使用する。

.addBack()メソッド

.addBack()メソッドは、最後に選択した要素に以前の要素を追加で選択する。

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

<div id="after">
  <p>.addBack()適用後</p>
  <p>こんにちは。devkumaです。</p>
</div>

次の例は、まず<div id="after">要素でfind()を利用して<p>を選択し、追加で.addBack()によって<div id="after">を選択してCSSスタイルを設定する。

$("div#after").find("p").addBack().css({"backgroundColor": "aqua"});

コードを実行

上の例で.addBack()メソッドがなければ、<p>要素だけにスタイルが設定される。

.each()メソッド

.each()メソッドは、選択した要素を各要素ごとに繰り返しながら、渡されたコールバック関数を実行する。

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

<ul>
    <li>最初のアイテム</li>
    <li>2番目のアイテム</li>
    <li>3番目のアイテム</li>
</ul>

次の例は、<li>要素を選択して繰り返しながらコールバック関数を実行する。ここでコールバック関数はindexを受け取り、偶数の場合だけclassを追加している。

$("li").each(function(index) {
    if (index % 2 == 0) {
        $(this).addClass("even");
    }
});

コードを実行

.end()メソッド

.end()メソッドは、最後に実行したメソッドの実行前の状態に、選択した要素の集合を復元する。

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

<p id="after">.end()適用後 <span>devkumaです。</span></p>

次の例は、まず<p id="after">要素でfind()を利用して<span>を選択し、.end()で.find()を取り消して<p id="after">を選択し、CSSスタイルを設定する。

$("p#after").find("span").end().css({"border": "2px solid green"});

コードを実行

上の例で.end()メソッドがなければ、<p>要素内の<span>要素を選択してスタイルを設定することになる。

.offsetParent()メソッド

.offsetParent()メソッドは、DOMツリーに存在する親要素のうち、位置指定された要素を基準に最も近い要素を探してjQueryオブジェクトとして包む。ここでいう位置指定とは、CSSプロパティのrelative、absolute、fixedを意味する。

このような位置が設定された要素が存在しない場合は、<html>要素が基準になる。

つまり、.position()メソッドで基準として使用される親要素は、.offsetParent()メソッドを使って確認できる。

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

<div class="container">
    <div>div（祖父）
        <ul style="position:relative;">ul（親）
            <li class="me">li（子）
                <span>span（孫）</span>
            </li>
        </ul>
    </div>
</div>

次の例で、classがmeの要素の基準となる親要素は、CSSスタイルがposition:relative;に設定された<ul>要素である。

$(".me").offsetParent().css("border", "2px solid red");

コードを実行

上の例で<ul>要素にposition:relative;がなければ、<html>要素が基準になる。

.contents()メソッド

.contents()メソッドは、選択した要素の子要素を、テキストノードとコメントノードまで含めてすべて選択する。

次の例は、<iframe>要素のすべての子要素を選択し、その中で<a>要素だけのCSSスタイルを変更する。 ボタンを押すと、<iframe>要素に読み込まれたすべての子要素のうち、<a>要素の背景色が変更される。

$("button").on("click", function() {
    $("iframe")	.contents().find("a").css("backgroundColor", "#BADA55");
});

コードを実行

参考