こちらでは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]