wrap()関連まとめ

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）には影響されない