デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.replaceAll( )要素の置き換え

構文

html要素を引数で指定した対象と置き換え返値:jQueryオブジェクト
html要素.replaceAll( 対象 )ver1.2〜
html要素はjQueryオブジェクトにしないといけません。

機能

jQueryオブジェクトに変換したhtml要素を引数で指定した対象と置き換えします。html要素がすでにhtml上に存在している場合は、指定した対象がhtml要素に上書きされるような結果になります(ですので「入れ換え」ではなく「置き換え」と表現しました)。

replaceWithメソッドとは主語と述語が入れ替わった構文ですが、replaceAllメソッドでは引数にfunctionを設定することができません。

解説

引数で指定した対象と置き換えます

サンプル(replaceAll/01.html)を開いてbody内にbutton要素が1つしかないことを確認してください。

<button>CLICK</button>

jQueryは以下の様に記述され、buttonをクリックするとbutton要素がdiv要素に置き換わります。

$("button").click(function(){
	$("<div>").replaceAll("button");
})

結果として、buttonをクリックするとbuttonが消え、代わりにdiv要素が表示されます。

htmlコンテンツでもOKです

サンプルreplaceAll/01ではdivタグと置き換えましたが、より複雑なhtmlコンテンツとも置き換えることができます。サンプル(replaceAll/02.html)を開いてbody内の構成はreplaceAll/01.htmlと同じ事を確認してください。jQueryもほとんど同じなのですが、以下の様にdivタグだけでなくi要素を含むテキストも設定しています。

$("button").click(function(){
	$("<div><i>div要素</i></div>").replaceAll("button");	
})

結果として、buttonをクリックするとbutton要素が斜体でdiv要素と書かれたdiv要素と置き換わります。

html上にある要素と置き換える(上書きされます)

html要素にすでにhtml上に存在する要素を指定すると、その要素で対象を上書きします
サンプル(replaceAll/03.html)を開いてbody内にul要素と3つのli要素があることを確認してください。li要素にはそれぞれfirst,second,thirdとクラス属性が設定されています。

<ul>
	<li class="first">first</li>
	<li class="second">second</li>
	<li class="third">third</li>
</ul>

jQueryには以下のように記述され、buttonをクリックするとthirdのクラス属性をもつ要素をfirstのクラス属性を持つ要素で上書きします。

$("button").click(function(){
	$(".first").replaceAll(".third");
})

結果として、buttonをクリックするとthirdのli要素をfirstのli要素が上書きします。位置が入れ換わるのではないことに注意してください。

関連項目

置き換える対象をセレクタとして設定したい場合はreplaceWithメソッドを利用します。
以下の様に「追加する対象」と「内容」が入れ替わった構文になっています。

メモ

jQueryオブジェクトも利用できるみたいです

本家のページには書いてなかったのですが、置き換える対象にjQueryオブジェクトを利用しても機能するようです。サンプル(replaceAll/test01.html)は、ほとんどreplaceAll/03.htmlと同じなのですが、replaceAllメソッドの引数に、以下の様にjQueryオブジェクトを設定しています。

$("button").click(function(){
	var targetObj = $(".third");
	$(".first").replaceAll(targetObj);
})

結果として、buttonをクリックするとreplaceAll/03.htmlと同じように機能します。