wrap()

このエントリーをはてなブックマークに追加

wrap()はセレクターで指定した要素を任意のHTMLで包む為のメソッドです。

つぎのようなHTMLがあったとします。

<div class="container">
	<div class="inner">Hello</div>
	<div class="inner">Goodbye</div>
</div>

次のスクリプトを実行することで.innerがそれぞれ引数で指定したHTMLで包まれます。

$('.inner').wrap('<div class="new" />');
<div class="container">
	<div class="new">
		<div class="inner">Hello</div>
	</div>
	<div class="new">
		<div class="inner">Goodbye</div>
	</div>
</div>

引数にfunctionを指定することで任意のreturnで返したHTMLで包むことができます。

$('.inner').wrap(function() {
	return '<div class="' + $(this).text() + '" />';
});

このサンプルではtext()でHTMLの内側のテキストを取得し、そのテキストをclass属性に設定しています。

<div class="container">
	<div class="Hello">
		<div class="inner">Hello</div>
	</div>
	<div class="Goodbye">
		<div class="inner">Goodbye</div>
	</div>
</div>
jQuery 1.0.0での追加/変更

wrap()はjQuery 1.0で定義されたメソッドです。

jQuery 1.4.0での追加/変更

jQuery 1.4より引数にfunctionを指定できるようになりました。

参考URL

.wrap() | jQuery API Documentation

登録日 : 2013年09月01日 最終更新日 : 2013年9月1日

同じカテゴリー(Manipulation)のエントリー

検索

スポンサードリンク

バージョン

リファレンス