jQuery

wrap()関連まとめ

More than 5 years have passed since last update.

wrap(),wrapInner(),wrapAll(),unwrap()がごっちゃになるのでメモとしてまとめました。

wrap()

要素を一個ずつ囲む。

js
$("a").wrap("<div />")
html
<a href="#">aaaa</a>
<a href="#">bbbb</a>
<a href="#">cccc</a>

実行するとこうなる

実行結果
<div><a href="#">aaaa</a></div>
<div><a href="#">bbbb</a></div>
<div><a href="#">cccc</a></div>

aタグが一個ずつdivで囲まれます。

 

wrap(fn)

要素を一個ずつ囲むwrap()のファンクションタイプ。
ファンクションはwrap()の他にwrapInner()でも可。

js
$("a").wrap(function(i){
     return '<div id="'+i+'" />'
}

returnに囲みたいエレメントを記述する

html
<a href="#">aaaa</a>
<a href="#">bbbb</a>
<a href="#">cccc</a>

実行するとこうなる

実行結果
<div id="0"><a href="#">aaaa</a></div>
<div id="1"><a href="#">bbbb</a></div>
<div id="2"><a href="#">cccc</a></div>


wrapInner()

要素の子要素を一個ずつ囲む。aの内側。

js
$("a").wrapInner("<div />")
html
<a href="#">aaaa</a>
<a href="#">bbbb</a>
<a href="#">cccc</a>

実行するとこうなる

実行結果
<a href="#"><div>aaaa</div></a>
<a href="#"><div>bbbb</div></a>
<a href="#"><div>cccc</div></a>

 

wrapAll()

要素をまとめて囲む。

js
$("a").wrapAll("<div />")
html
<a href="#">aaaa</a>
<a href="#">bbbb</a>
<a href="#">cccc</a>

実行するとこうなる

実行結果
<div>
     <a href="#">aaaa</a>
     <a href="#">bbbb</a>
     <a href="#">cccc</a>
</div>

まとめて囲まれる。便利。
この場合のdivが、要素全体の親要素になる。

 

unwrap()

要素の親要素を削除する。全部小文字。unWrap()とは書かない。

js
$("a").unwrap()
html
<div class="dmy">
     <div><a href="#">aaaa</a></div>
     <div><a href="#">bbbb</a></div>
     <div><a href="#">cccc</a></div>
</div>

実行するとこうなる

実行結果
<div class="dmy">
     <a href="#">aaaa</a>
     <a href="#">bbbb</a>
     <a href="#">cccc</a>
</div>

aタグを囲んでいた親要素のdivがなくなる、
またその上の要素(div class:dmy)には影響されない