【jQuery】要素を囲むメソッド(wrap、wrapAll、wrapInner、unwrap)の使い方

jQueryの要素を囲むメソッド

こちらではjQueryのメソッドのうち、要素を囲む(ラップする)メソッドについて解説しています。

jQueryの要素を囲むメソッド一覧

メソッド 解説
wrap(elem) 要素をelemで囲む
wrapAll(elem) 選択した要素をまとめてelemで囲む
wrapInner(elem) 選択した要素の内側をelemで囲む
unwrap() 選択した要素の親要素を削除

wrap(elem)

選択した要素をelemで囲みます。

wrap(elem)の使い方

<span>りんご</span>
<span>みかん</span>
<span>メロン</span>

上記のHTMLにおいて

$('span').wrap('<p></p>');

とすると

<p><span>りんご</span></p>
<p><span>みかん</span></p>
<p><span>メロン</span></p>

となります。

wrapAll(elem)

選択した要素をまとめてelemで囲みます。

選択された要素の間に選択されていない要素がある場合は、elemの囲いの外に出されます。

wrapAll(elem)の使い方

<span class="red">りんご</span>
<span>みかん</span>
<span>メロン</span>
<span class="red">いちご</span>

上記のHTMLにおいて

$('.red').wrapAll('<p></p>');

とすると

<p>
<span class="red">りんご</span>
<span class="red">いちご</span>
</p>
<span>みかん</span>
<span>メロン</span>

となります。「みかん」と「メロン」は選択されていないので、<p></p>の外に出されています。

wrapInner(elem)

選択した要素の内側をelemで囲みます。

wrapInner(elem)の使い方

<span>りんご</span>
<span>みかん</span>
<span>メロン</span>

上記のHTMLにおいて

$('span').wrap('<strong></strong>');

とすると

<span><strong>りんご</strong></span>
<span><strong>みかん</strong></span>
<span><strong>メロン</strong></span>

となります。

unwrap()

選択した要素の親要素を削除します。

unwrap()の使い方

<div>
<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>
</div>

上記のHTMLにおいて

$('ul').unwrap();

とすると

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

となります。

[prism]