4章 HTML、テキスト、フォーム値の取得＆設定
包み込み、置換
ここではマッチした要素を包み込んだり、置換するケースを見て行きます。
.wrap()
マッチした要素を指定した要素で包み込みます。
具体例で見てみましょう。
<span>太郎</span>
<span>次郎</span>
$("span").wrap("<div></div>");
上記を実行すると、HTMLは以下のようになります。
<div><span>太郎</span></div>
<div><span>次郎</span></div>
各要素が、指定した要素で包み込まれました。上記の場合は、引数で指定した"<div></div>"をその場で生成し、その生成した要素で括っています。
既存の要素を引数で指定することもできます。この場合は、引数で指定した要素のコピーで要素が包み込まれます。
例）
$("span").wrap(".template .mydiv");
.wrapAll()
マッチした要素を一括りで包み込みます。
具体例で見てみましょう。
<span>太郎</span>
<span>次郎</span>
$("span").wrapAll("<div></div>");
上記を実行すると、HTMLは以下のようになります。
具体例で見てみましょう。
<div><span>太郎</span>
<span>次郎</span>
</div>もし太郎と次郎の間に他の要素、例えば、<strong>花子<strong>という要素が入っていた場合は、それらは押し出されます。
（変更前）
<span>太郎</span>
<strong>花子</strong>
<span>次郎</span>
（変更後）
<div><span>太郎</span>
<span>次郎</span>
</div><strong>花子</strong>
.wrapInner()
マッチした要素の中身（内側）を指定した要素で包み込みます。
具体例で見てみましょう。
<span>太郎</span>
<span>次郎</span>
$("span").wrapInner("<strong></strong>");
上記を実行すると、HTMLは以下のようになります。
<span><strong>太郎</strong></span>
<span><strong>次郎</strong></span>
.unwrap()
マッチした要素からその親要素を取り除きます。 .wrap()又は.wrapAll()の逆の動作と言えます。
<div><span>太郎</span>
<span>次郎</span>
</div><div><span>のび太</span></div>
<div><span>スネ夫</span></div>
$("span").unwrap();
上記を実行すると、HTMLは以下のようになります。
<span>太郎</span>
<span>次郎</span>
<span>のび太</span>
<span>スネ夫</span>
.unwrap()の場合は、引数には何も指定しません。
.replaceWith()
マッチした要素を指定した要素で置き換えます。
具体例で見てみましょう。
<div class="container">
<div class="inner first">太郎</div>
<div class="inner second">次郎</div>
<div class="inner third">三郎</div>
</div>$('div.second').replaceWith('<h2>与太郎</h2>');
上記を実行すると、HTMLは以下のようになります。
<div class="container">
<div class="inner first">太郎</div>
<h2>与太郎</h2>
<div class="inner third">三郎</div>
</div>div.second部分が、<h2>与太郎</h2>で置き換えられたのが分かります。
マッチする要素が複数の場合は、それら全てが置き換えられます。
元のHTMLはそのままとして、次のJSを実行するとします。
$('div.inner').replaceWith('<h2>与太郎</h2>');
すると、次のようなHTMLになります。
<div class="container">
<h2>与太郎</h2>
<h2>与太郎</h2>
<h2>与太郎</h2>
</div>既存の要素を引数に指定することもできます。その場合は、その要素は「移動」されます。
元のHTMLはそのままとして、次のJSを実行するとします。
$('div.third').replaceWith($('.first'));
すると、次のようなHTMLになります。
<div class="container">
<div class="inner second">次郎</div>
<div class="inner first">太郎</div>
</div>「太郎」が、「三郎」の位置に来て、置き換えられたことが分かります。
ちなみに、ここで置き換えられて追い出された「三郎」は、どこへ行ってしまったのでしょうか？どこか行ってしまいました。 もはやこの三郎を呼び戻すことはできないのでしょうか？実は、.replaceWith()では、追い出された要素をjQueyオブジェクトとして返すため、引き続き何かの操作に使用することもできます。
var saburo = $('div.third').replaceWith($('.first'));
alert(saburo.text());// 「三郎」と出力
.replaceAll()
.append()に前後の順番が入れ替わった.appendTo()があるように、.replaceWith()にも同様にあります。それが、.replaceAll()です。 つまり、
A.replaceWith(B);
と
B.replaceAll(A);
は、同じことになります。