jQuery入門道場 jQueryの使い方

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);
は、同じことになります。