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

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

.replaceWith( )要素の置き換え

構文

引数で指定した対象と入れ換え返値:jQueryオブジェクト
jQo.replaceWith( html )ver1.2〜
jQo.replaceWith( function )ver1.4〜

機能

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

ver1.4からは引数にfunctionを指定することも可能で、条件によって入れ換える内容を変更するなど高度な処理にも対応できます

解説

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

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

<button>CLICK</button>

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

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

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

htmlコンテンツでもOKです

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

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

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

引数にjQueryオブジェクトを利用

replaceWithメソッドはjQueryオブジェクトを利用することで、すでにhtml上に存在する要素と引数で指定した要素を置き換えることができます。このときhtml上に存在していた要素は削除されるため、機能的には対象を上書きするような形となります。

サンプル(replaceWith/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をクリックするとfirstのクラス属性を持つ要素をmyObjで上書きします。変数myObjは2行目で作成されたthirdのクラス属性を持つ要素です。

$("button").click(function(){
	var myObj = $(".third");
	$(".first").replaceWith(myObj);
})

結果として、buttonをクリックするとfirstのli要素をthirdのli要素が上書きします。位置が入れ換わるのではなく上書きになることに注意してください。replaceAllメソッドでは引数にjQueryオブジェクトを設定しなくても機能しましたが、replaceWithメソッドでは機能しません。ページ最下段の「メモ」で説明があります。

引数にFunctionを設定

サンプル(replaceWith/04.html)を開いてbody内にquesのクラス属性がついたspan要素が3つあることを確認して下さい。

<p>りんご:<span class="ques">?</span></p>
<p>みかん:<span class="ques">?</span></p>
<p>ばなな:<span class="ques">?</span></p>

jQueryは以下の様に記述されreplaceWithの引数にfunctionの「replaceFunc」が設定されています。

$("button").click(function(){
	$(".ques").replaceWith(replaceFunc);
})

replaceWithメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(インデックス番号)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で最終的に置き換える内容をreturnで返すようにします。

replaceWithに設定するFunctionの構文
function 任意の名前(インデックス番号){
 任意の処理(引数を利用可能)
 return 置き換える内容;
}

サンプルreplaceWith/04.htmlで利用したreplaceFuncは以下の様になっており、index番号が0だったらApple、1だったらOrange、2だったらBananaのテキスト内容を持ったspan要素と入れ換えます。

function replaceFunc(index){
	switch (index){
		case 0:return "<span class='ans'>Apple</span>";
		case 1:return "<span class='ans'>Orange</span>";
		case 2:return "<span class='ans'>Banana</span>";
	}
}

結果として、buttonをクリックすると?と記述されたspan要素が、解答の書かれたspan要素に置き換わります。

関連項目

入れ換える対象を引数に設定したい場合はreplaceAllメソッドを利用します。以下の様に「追加する対象」と「内容」が入れ替わった構文になっています。
ただしreplaceAllメソッドは引数にfunctionを設定することはできません。

メモ

replaceAllのような設定はできない

サンプル(replaceWith/03.html)で引数にjQueryオブジェクトを利用せずに、以下の様にテキストを設定したサンプルを用意しました。→参考:サンプル(replaceWith/test01.html

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

この場合、引数に設定された「.third」はテキストとして扱われ、firstのクラス属性の要素が「.third」というテキストと入れ替わります。replaceAllメソッドではサンプル(replaceAll/03.html)のようにjQueryオブジェクトでなくとも機能しています。

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

本家のサイトのサンプルでは、replaceAllの場合はjQueryオブジェクトは利用せず、replaceWithでは利用している事から、これが仕様なのでしょう。

htmlコンテンツを維持して入換

本家サイトのサンプルに興味深いサンプルがあったので、ここにメモしておきます。button要素をクリックすると、button要素の内容はそのままに、button要素をdiv要素に置き換えるサンプルです。まったく同じではつまらないので、htmlコンテンツを維持するサンプルとして作成してみました。
→サンプル(replaceWith/test02.html

$("button").click(function(){
	$(this).replaceWith( "<div>" + $(this).html() + "</div>" );
})

クリックされたbutton要素の要素の内容をhtmlメソッドを利用して取得し、divタグで置き換える際に利用します。その結果、buttonをクリックするとbutton要素の内容(i要素付きのテキスト)を維持しつつdiv要素に置き換えることができます。

クリックで答え合わせ

サンプルreplaceWith/04.htmlではbuttonをクリックすると、すべての回答が一度に表示されました。これを各?のspan要素をクリックした際に個別に入れ換えるサンプルに作りかえました。ポイントは回答をspan要素の属性値(サンプルではans)として設定しておくことです。→サンプル(replaceWith/test03.html

<p>りんご:<span class="ques" ans="Apple">?</span></p>
<p>みかん:<span class="ques" ans="Orange">?</span></p>
<p>ばなな:<span class="ques" ans="Banana">?</span></p>

この値を以下の様にreplaceFunc内でattrメソッドを利用して取得し、その値で置き換えます。

function replaceFunc(){
	var myAns = $(this).attr("ans");
	return "<span class='ans'>"+myAns+"</span>";
}

v1.9での仕様変更

ドキュメント内に存在しない要素(つまり新規に作成した要素)に対しreplaceWithメソッドで要素を置き換えたた場合、返されるjQueryオブジェクトには入れ換える前の要素になりました。まずはv1.8の動作を確認します、サンプル(replaceWith/test04.html)を開いてjQueryを確認して下さい。

以下の2行目でjQuery(html)を利用して新規にspan要素を作成しています。4行目ではbuttonがクリックされた際に、作成した要素に対しreplaceWithメソッドでdiv要素と置き換えています。そして5行目でappendToメソッドを利用してbody内に表示します。

newElem = $("<span>");
$("button").click(function(){
	var myObject = newElem.replaceWith("<div>");
	myObject.appendTo("body");
})

buttonをクリックすると赤い矩形が表示されます。css設定によってdiv要素は赤く表示するようにしてあるので、このサンプルではdiv要素が表示されています。

続いてサンプル(replaceWith/test04b.html)を開いてjQueryのバージョンが1.9.0に変更されている以外はreplaceWith/test04.htmlと同じ事を確認して下さい。

<script type="text/javascript" src="../../../css_js/jquery-1.9.0.min.js"></script>

このサンプルではbuttonをクリックすると青い矩形が表示されます。css設定によってspan要素は青く表示するようにしてあるので、このサンプルではspan要素が表示されています。つまりreplaceWithメソッドで入れ換える前の状態で表示されます。これは仕様変更によって、新規に作成した要素に対しreplaceWithメソッドで要素を入れ換えた時に返されるjQueryオブジェクトは置き換えが反映されなくなったためです。

私的にはv1.8の仕様の方が良いような気もするのですが、この仕様によるバグ(This created several inconsistencies and outright bugs)があるため修正されたようです。→参考:本家サイトでの説明