jQuery wrap 複数：複数の要素をまとめてラップする方法
このチュートリアルでは、jQuery の .wrap() と .wrapAll() メソッドを使用して、複数の HTML 要素を効率的にラップする方法を説明します。要素を個別にラップするか、グループとしてラップするかを選択する方法を学び、実用的な例を通して理解を深めましょう。
jQuery で複数の要素をラップする
jQuery は、複数の要素をラップするための 2 つの便利なメソッドを提供しています: .wrap() と .wrapAll() です。これらのメソッドの違いは、ラップ方法にあります。
.wrap() メソッド:
- 各要素を指定した HTML 構造で個別にラップします。
- 複数の要素を選択していても、それぞれが別々にラップされます。
- 例：リストアイテム (li) をそれぞれ div で囲む
.wrapAll() メソッド:
- 選択したすべての要素を、指定した HTML 構造で**ひとまとめに**ラップします。
- 例：複数の段落 (p) をまとめてひとつの div で囲む
.wrap() と .wrapAll() の使い方
構文:
$(selector).wrap(wrappingElement);
$(selector).wrapAll(wrappingElement);
パラメータ:
| パラメータ | 説明 |
|---|---|
selector |
ラップする要素を選択するためのセレクタ。 |
wrappingElement |
ラップに使用する HTML 要素、または HTML 文字列。 例： <div class="container"></div>, "<div class='wrapper'></div>" |
実用的な例
リストアイテムを個別にラップ:
$("li").wrap("<div class='item-wrapper'></div>");
このコードは、各リストアイテム (li) を個別に "item-wrapper" クラスを持つ div 要素で囲みます。
複数の段落をまとめてラップ:
$("p").wrapAll("<div class='content-wrapper'></div>");
このコードは、すべての段落 (p) をまとめて "content-wrapper" クラスを持つ単一の div 要素で囲みます。
まとめ
jQuery の .wrap() と .wrapAll() は、HTML 要素を動的にラップするための強力なメソッドです。要素を個別にラップするか、グループとしてラップするかを選択することで、柔軟かつ効率的に HTML 構造を操作できます。
関連する質問と回答
1. .wrap() と .wrapAll() の違いは何ですか？
.wrap() は選択した各要素を個別にラップし、.wrapAll() は選択したすべての要素をまとめてひとつの要素でラップします。
2. ラップ要素にクラスを追加するにはどうすればよいですか？
wrappingElement パラメータにクラス属性を含めます。例："<div class='wrapper'></div>"
3. 既存の要素をラップ要素として使用できますか？
はい、wrappingElement パラメータに既存の要素の jQuery オブジェクトを渡すことができます。例：$existingElement
その他の参考記事:jquery wrap