jquery jQuery 要素の操作

2014年2月9日

jQuery で要素を操作する際に使用するメソッドに関するメモ。

要素にコンテンツを追加

ラップ集合の全要素(既存のコンテンツ)に対して渡されたコンテンツ(引数で指定した要素等)を追加するメソッドは以下のようなものがある。

  • append:コンテンツを要素の子要素の末尾に追加
  • prepend:コンテンツを要素の子要素の先頭に追加
  • after:コンテンツを要素の後に追加
  • before:コンテンツを要素の前に追加
ラップ集合(wrapped set)
$() 関数(jQuery() 関数)が返す DOM 要素の配列(セレクタとマッチする要素が、文書の中で定義された順番に並んでいる)を含む特別な JavaScriptオブジェクト
「マッチした要素の集合」を jQueryラッパー、またはラップ集合(wrapped set)と呼ぶ

要素同士の位置関係
jquery_append

サンプル

append

渡された HTML 断片あるいは要素を、マッチした全要素のコンテンツの末尾に追加する。

書式
$(セレクタ).append(content);
パラメータ
content(String|Element|jQuery|Function)
ラップ集合の要素の末尾に追加する内容を文字列、要素(HTML断片)、ラップ集合、 関数のいずれかで指定。もし関数ならばラップされた各要素について呼び出される。関数のコンテクストとして、その要素が設定され、要素インデックスと 既存のコンテンツを2つのパラメータとして渡される。この関数の戻り値が、追加すべきコンテンツとして使われる。
content が既存の要素のラップ集合「$(セレクタ)」の場合、移動された後 元の要素は前にあった場所から削除される。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="self">
    <p>既存の子要素</p>
</div>

以下を実行すると

$('#self').append('<div>追加されるコンテンツ</div>');

引数で指定されたコンテンツは div#self の「既存の子要素」の末尾に追加される。

<div id="self">
    <p>既存の子要素</p>
    <div>追加されるコンテンツ</div>
</div>
パラメータに関数を指定した場合

もしパラメータが関数ならばラップされた各要素について呼び出される。

  • 関数のコンテクストとして、その要素が設定される
  • 要素インデックスと 既存のコンテンツを2つのパラメータとして渡される
  • この関数の戻り値が、追加すべきコンテンツとして使われる

以下は全く実用的ではないサンプル。

「コールバック」という文字列をクリックすると、各 li 要素のコンテンツの値(コールバックのパラメータ content)を CSS の color の値に指定して、インデックスを付けて表示

HTML

<div class="control">
    <p class="button" id="func">コールバック</p>
</div>

<div id="callback">
    <ul>
        <li>red</li>
        <li>green</li>
        <li>blue</li>
    </ul>
</div>

jQuery

var is_called = false;
$('#func').click(function(){
  if(!is_called) {
    $('#callback li').append(function(index, content) {
      var html = '<span style="color: ' + content + '"> ' 
          +  index + $(this).text() + ' </span>';
      is_called = true;
      return html;
    });
  }  
});

サンプル

prepend

渡された HTML 断片あるいは要素を、マッチした全要素のコンテンツの先頭に追加する。

書式
$(セレクタ).prepend(content);
パラメータ
content(String|Element|jQuery|Function)
ラップ集合の要素の末尾に追加する内容を文字列、要素(HTML断片)、ラップ集合、 関数のいずれかで指定。もし関数ならばラップされた各要素について呼び出される。関数のコンテクストとして、その要素が設定され、要素インデックスと 既存のコンテンツを2つのパラメータとして渡される。この関数の戻り値が、追加すべきコンテンツとして使われる。
content が既存の要素のラップ集合「$(セレクタ)」の場合、移動された後 元の要素は前にあった場所から削除される。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="self">
    <p>既存の子要素</p>
</div>

以下を実行すると

$('#self').prepend('<div>追加されるコンテンツ</div>');

引数で指定されたコンテンツは div#self の「既存の子要素」の先頭に追加される。

<div id="self">
    <div>追加されるコンテンツ</div>
    <p>既存の子要素</p>  
</div>

after

渡されたHTML断片または要素をマッチした全要素の弟として、その直後に挿入する。

書式
$(セレクタ).after(content);
パラメータ
content(String|Element|jQuery|Function)
ラップ集合の要素の末尾に追加する内容を文字列、要素(HTML断片)、ラップ集合、 関数のいずれかで指定。もし関数ならばラップされた各要素について呼び出され、その要素が関数コンテクストとして渡される。要素インデックスをパラメータとして渡される。この関数の戻り値が コンテクストとして挿入される。
content が既存の要素のラップ集合「$(セレクタ)」の場合、移動された後 元の要素は前にあった場所から削除される。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="self">
    <p>既存の子要素</p>
</div>

以下を実行すると

$('#self').after('<div>追加されるコンテンツ</div>');

引数で指定されたコンテンツは div#self の後に(弟として)追加される。

<div id="self">
    <p>既存の子要素</p>  
</div>
<div>追加されるコンテンツ</div>

before

渡されたHTML断片または要素をマッチした全要素の兄として、その直前に挿入する。

書式
$(セレクタ).before(content);
パラメータ
content(String|Element|jQuery|Function)
ラップ集合の要素の末尾に追加する内容を文字列、要素(HTML断片)、ラップ集合、 関数のいずれかで指定。もし関数ならばラップされた各要素について呼び出され、その要素が関数コンテクストとして渡される。要素インデックスをパラメータとして渡される。この関数の戻り値が コンテクストとして挿入される。
content が既存の要素のラップ集合「$(セレクタ)」の場合、移動された後 元の要素は前にあった場所から削除される。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="self">
    <p>既存の子要素</p>
</div>

以下を実行すると

$('#self').before('<div>追加されるコンテンツ</div>');

引数で指定されたコンテンツは div#self の先頭に(兄として)追加される。

<div>追加されるコンテンツ</div>
<div id="self">
    <p>既存の子要素</p>  
</div>

要素をコンテンツに追加

ラップ集合の全要素を指定されたターゲット郡のコンテンツに追加する。

  • appendTo:要素をターゲット要素の子要素の末尾に追加
  • prependTo:要素をターゲット要素の子要素の先頭に追加
  • insertAfter:要素をターゲット要素の後に追加
  • insertBefore:要素をターゲット要素の前に追加

要素同士の位置関係

jquery_appendTo

サンプル

appendTo

ラップ集合の全要素を指定されたターゲット郡のコンテンツの末尾に追加する。

書式
$(セレクタ).appendTo(targets);
パラメータ
targets(String|Element)
jQuery セレクタを含む文字列または DOM 要素。ラップ集合の各要素が、ターゲットの各要素の 内容の後ろに追加される。
$(セレクタ) が既存の要素のラップ集合の場合、移動された後 元の要素は前にあった場所から削除される。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="target">
    <p>既存の子要素</p>
</div>

以下を実行すると

$('<div>追加されるコンテンツ</div>').appendTo('#target');

コンテンツは div#target の「既存の子要素」の末尾に追加される。

<div id="target">
    <p>既存の子要素</p>
    <div>追加されるコンテンツ</div>
</div>

prependTo

ラップ集合の全要素を指定されたターゲット郡のコンテンツの先頭に追加する。

書式
$(セレクタ).prependTo(targets);
パラメータ
targets(String|Element)
jQuery セレクタを含む文字列または DOM 要素。ラップ集合の各要素が、ターゲットの各要素の内容よりも前に追加される。
$(セレクタ) が既存の要素のラップ集合の場合、移動された後 元の要素は前にあった場所から削除される。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="target">
    <p>既存の子要素</p>
</div>

以下を実行すると

$('<div>追加されるコンテンツ</div>').prependTo('#target');

コンテンツは div#target の「既存の子要素」の先頭に追加される。

<div id="target">
    <div>追加されるコンテンツ</div>
    <p>既存の子要素</p>  
</div>

insertAfter

ラップ集合の全要素をDOMの指定されたターゲットの直後に追加する。

書式
$(セレクタ).insertAfter(targets);
パラメータ
targets(String|Element)
jQueryセレクタを含む文字列またはDOM要素。ラップ集合の各要素が、ターゲットの各要素の 直後に追加される。
$(セレクタ) が既存の要素のラップ集合の場合、移動された後 元の要素は前にあった場所から削除される。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="target">
    <p>既存の子要素</p>
</div>

以下を実行すると

$('<div>追加されるコンテンツ</div>').insertAfter('#target');

コンテンツは div#target の後に(弟として)追加される。

<div id="target">
    <p>既存の子要素</p>  
</div>
<div>追加されるコンテンツ</div>

insertBefore

ラップ集合の全要素を DOM の指定されたターゲットの直前に追加する。

書式
$(セレクタ).insertBefore(targets);
パラメータ
targets(String|Element)
jQueryセレクタを含む文字列またはDOM要素。ラップ集合の各要素が、ターゲットの各要素の 直前に追加される。
$(セレクタ) が既存の要素のラップ集合の場合、移動された後 元の要素は前にあった場所から削除される。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="target">
    <p>既存の子要素</p>
</div>

以下を実行すると

$('<div>追加されるコンテンツ</div>').insertBefore('#target');

コンテンツは div#target の先頭に(兄として)追加される。

<div>追加されるコンテンツ</div>
<div id="target">    
    <p>既存の子要素</p>  
</div>

要素のラッピングとアンラッピング

要素を何らかのマークアップの中にラッピングするにはwrap()メソッドを使う。

サンプル

wrap

マッチした集合の要素を渡されたHTMLタグ(または渡された要素のクローン:クローンは自動的に作成される)でラップする。

書式
$(セレクタ).wrap(wrapper);
パラメータ
wrapper (String|Element)
マッチした集合の各要素を、ラップするのに使う要素の開きタグと閉じタグを含む文字列か、 クローニングしてラッパーにすべき要素。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="target">
    <p>jQuery</p>
    <p>PHP</p>
    <p>WordPress</p>
</div>

以下を実行すると

$('#target > p').wrap($('<div></div>').css({border:'solid 1px blue'}));

それぞれの「’#target < p’」が div 要素でラップされる。

<div id="target">
    <div style="border: 1px solid blue;">
        <p>jQuery</p>
    </div>
    <div style="border: 1px solid blue;">
        <p>PHP</p>
    </div>
    <div style="border: 1px solid blue;">
        <p>WordPress</p>
    </div>
</div>

複数の要素がマッチしたとき、もし集合の中にある全要素を一括してラップしたいのなら、wrapAll()メソッドを使う。

wrapAll

マッチした集合の要素全体を1個のユニットとして、渡された HTML タグ(または渡された要素のクローン)でラップする。

書式
$(セレクタ).wrapAll(wrapper);
パラメータ
wrapper (String|Element)
マッチした集合の各要素を、ラップするのに使う要素の開きタグと閉じタグを含む文字列か、 クローニングしてラッパーにすべき要素。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="target">
    <p>jQuery</p>
    <p>PHP</p>
    <p>WordPress</p>
</div>

以下を実行すると

$('#target > p').wrapAll($('<div></div>').css({border:'solid 1px green'}));

「’#target < p’」の全体が div 要素でラップされる。

<div id="target">
    <div style="border: 1px solid green;">
        <p>jQuery</p>
        <p>PHP</p>
        <p>WordPress</p>
    </div>
</div>

マッチした集合の中にある要素ではなく、そのコンテンツ(その要素配下の子要素)をラップしたい場合はwrapInner()を使う。

wrapInner

書式
$(セレクタ).wrapInner(wrapper);
パラメータ
wrapper (String|Element)
マッチした集合の各要素を、ラップするのに使う要素の開きタグと閉じタグを含む文字列か、 クローニングしてラッパーにすべき要素。
戻り値
ラップ集合

以下のような HTML がある場合

<div id="target">
    <p>jQuery</p>
    <p>PHP</p>
    <p>WordPress</p>
</div>

以下を実行すると

$('#target > p').wrapInner($('<div></div>').css({border:'solid 1px orange'}));

それぞれの「’#target < p’」の配下の要素(この例の場合はテキスト要素)が div 要素でラップされる。

<div id="target">
    <p>
        <div style="border: 1px solid orange;">jQuery</div>
    </p>
    <p>
        <div style="border: 1px solid orange;">PHP</div>
    </p>
    <p>
        <div style="border: 1px solid orange;">WordPress</div>
    </p>
</div>

wrap メソッドと wrapInner メソッドとの違いは、カレント要素そのものを囲むのか、それともカレント要素配下の子要素(またはテキスト)を囲むかの違い。

子要素の親を削除する(つまり、ラップを外す)処理は、unwrap()メソッドで行う。

unwrap

ラップされている要素郡の親要素(コンテナ)を削除する。 子要素が(その兄弟とともに)DOM内で親要素を置き換える。

書式
$(セレクタ).unwrap();
パラメータ
なし
戻り値
ラップ集合

以下のような HTML がある場合

<div id="target">
    <div style="border: 1px solid green;">
        <p>jQuery</p>
        <p>PHP</p>
        <p>WordPress</p>
    </div>
</div>

以下を実行すると(セレクタが他のメソッドと異なり > を付けていない)

$('#target p').unwrap();

「div style=”border: 1px solid green;”」が取り除かれる。

<div id="target">
    <p>jQuery</p>
    <p>PHP</p>
    <p>WordPress</p>
</div>

要素の置換

サンプル

replaceWith

マッチした要素のそれぞれを指定のコンテンツで置き換える。

書式
$(セレクタ).replaceWith(content);
パラメータ
content (String|Element|Function) 
置換するコンテンツとなる HTML 断片を含む文字列か、既存の要素を置換するために 移動する要素への参照。もし関数なら、ラップされた個々の要素について、その関数が呼び出される。関数コンテクストとして、その要素が設定され、 パラメータは渡されない。この関数の戻り値が新しいコンテンツとして使われる。
戻り値
置換された要素を含むラップ集合

画像で alt 属性を持つものを、それらの画像の alt 値を含む span 要素で置き換える(画像をそのalt値の文字列で置き換える)例。

HTML

<div id="target">
  <ul>
    <li><img src="images/1.jpg" width="400" alt="夕日"></li>
    <li><img src="images/2.jpg" width="400" alt="子供の海がめ"></li>
    <li><img src="images/3.jpg" width="400" alt="海岸の子供"></li>
  </ul>
</div>

jQuery

$('#target ul li img').each(function(index, element) {
        $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>' );
});

コールバックを使えば、each() を使わず以下のように記述しても同じ結果になる。

$('#target ul li img').replaceWith(function() {
        return '<span>' + $(this).attr('alt') + '</span>';
});

画像のサイズを変更する例。

$('#replaceWith2').click(function(){
    $('#target ul li img').each(function(index, element) {
        $(this).replaceWith(function() {
            return $(this).parent('li').html().replace(/width="400"/, 'width="200"');
        });
    });
});

コールバックを使えば、each() を使わず以下のように記述しても同じ結果になる。

$('#replaceWith2').click(function(){
    $('#target ul li img').replaceWith(function() {
        return $(this).parent('li').html().replace(/width="400"/, 'width="200"');
    });
});

replaceAll()では、replaceWith()と同じ処理を実行する際、指定の順序が逆転する(入れ替わる)。

replaceAll

「selector」で選択された要素を全て(コンテンツ)置き換える。 この関数は replaceWith と引数の関係が逆になっているだけで、同じ動作をする。

但し、置き換える内容は同じもの(コンテンツ)になるので、特定の要素を全て「同じ内容」に置き換えるのに使う場合に便利。

書式
$(コンテンツ).replaceAll(selector);
パラメータ
selector (Selector)
置き換える要素を識別するセレクタの文字列式。
戻り値
挿入された要素を含むラップ集合

replaceWith() と同様、replaceAll() も jQuery のラップ集合を返すが、この集合には置換前の要素は含まれず、置換後の挿入された 要素が含まれる。置換前の要素は失われ、この後は操作が不可能になる。どちらの置換メソッドを使うかは、この点にも配慮する必要がある。

画像要素を全て p 要素('<p>Photo</p>’)に置き換える例。

$('#replaceAll').click(function(){
  $('<p>Photo</p>').replaceAll('#target ul li img');
});

要素のクローン(コピー)の作成

サンプル

ラップ集合に入っている要素のコピーを作り、それらを含む新しいラップ集合を返す。要素に子孫があれば、それらもコピーされる。 オプションを指定すれば、イベントハンドラもコピーされる。

書式
$(セレクタ).clone(copyHandler);
パラメータ
copyHandler (Boolean)
もし trueなら、イベントハンドラがコピーされるが、falseまたは省略されたら、ハンドラのコピーは 行わない。
戻り値
新しく作られたラップ集合

クラスが「beach」の画像要素をコピーし、幅を「600」に変更し更に「clone」というクラスを付与してそれを photo という id を持つ div 要素に追加

<div id="photo"></div>

<div id="target">
  <ul>
      <li><img src="images/1.jpg" width="400"></li>
      <li><img src="images/2.jpg" width="400"></li>
      <li><img src="images/3.jpg" width="400" class="beach"></li>
  </ul>
</div>

jQuery

$('#target ul li img.beach').clone().attr('width', 600).addClass('clone').appendTo('div#photo');

クローンを挿入後、end()メソッドを使って元のラップ集合(クローンもとのターゲット)を選択し、それを隠す例。

$('#target ul li img.beach').clone().appendTo('div#photo').end().end().hide();

要素の削除

サンプル

remove

ラップ集合に含まれる全ての要素をページDOMから削除する。

書式
$(セレクタ).remove(selector)
パラメータ
selector (String)
オプション。ラップ集合のうち、削除すべき要素のみを指定するフィルタセレクタ。
戻り値
ラップ集合
  • remove() メソッドは結果としてラップ集合を返すが、DOM から削除された要素も、このラップ集合によって参照されるため、まだガベージコレクションの 対象にはできない
  • このため、他のjQueryメソッドを使ってこれらの要素を処理できる(appendTo(), insertBefore()などのメソッドが使える)
  • 但し、remove() を使って DOM から削除された要素にバインドされていた jQuery のデータやイベントがあればそれらは削除される。

div#photo の画像要素のうち、クラスが「clone」のものを削除する例。

$('div#photo img').remove('.clone');

detach() というメソッドも、DOM から要素を削除するが、削除した要素にバインドされていたイベントやデータは削除されない。

detach

ラップ集合の全要素を DOM から切り離すが、要素にバインドされていたイベントや jQuery データは失わない。

書式
$(セレクタ).detach(selector);
パラメータ
selector (String)
オプション。ラップ集合のうち、切り離しの対象とする要素のみを指定するフィルタセレクタ。
戻り値
ラップ集合

このdetach()メソッドは、一時的に要素を削除するが、あとで(そのイベントやデータを損なうことなく)DOM に戻したい場合に適している。

DOM 要素のコンテンツ(内容)を空にしたいときは、empty() を使う。

empty

マッチした集合の、全部のDOM要素の「内容」を削除する。要素自体は削除されず、そのまま残る。

書式
$(セレクタ).empty();
パラメータ
なし
戻り値
ラップ集合
<div id="photo">
    <img src="images/1.jpg">
</div>

上記の div#photo の内容(画像)を空にする例

$('#photo').empty();

//$('#photo img').empty(); では NG

HTML 文字列とプロパティ情報を表すオブジェクト・リテラルで要素を生成

$() 関数に対して、HTML 文字列とプロパティ情報を表すオブジェクト・リテラルを渡すことで、新規の要素(jQuery オブジェクト)を生成することができる。

書式
$(HTML 文字列, オブジェクト・リテラル)

#create_image という要素をクリックすると、$() 関数で新規に生成した タグを div#photo に追加する例

サンプル

$('#create_image').click(function(){
    $('<img />',
    {
        // 属性を設定
        src: 'images/1.jpg',
        alt: 'オアハカの街の夕方',
        // スタイルを定義
        css: {
            'border': 'solid 2px #CCC',
            'cursor': 'pointer'
        },
        // イベントに対応するリスナを追加
        mouseover: function() {
            $(this).animate({opacity: 0.5});
        },
        mouseout: function() {
            $(this).animate({opacity: 1});
        },
        click: function() {
            window.alert($(this).attr('alt'));
        } 
    }).appendTo('#photo');  
});