jQueryで要素を囲うには？

jQueryで要素を囲う方法

jQueryを使ってHTML要素を操作する際、特定の要素を他の要素で囲みたい場合があります。例えば、リストアイテムを<div>タグで囲んでスタイルを適用したり、段落を引用符で囲んで強調表示したりなどです。

jQueryでは、要素を囲うための便利なメソッドとして、.wrap() と .wrapAll() が用意されています。この記事では、それぞれの使用方法を具体的な例を交えて紹介します。

.wrap() メソッド

.wrap() メソッドは、選択した各要素を指定したHTML構造で囲みます。

構文:

$(selector).wrap(wrappingElement);

引数:

  • `wrappingElement`: 要素を囲むHTML構造。文字列、jQueryオブジェクト、DOM要素を指定できます。

例:

以下のHTMLコードがあるとします。

<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</ul>

各リストアイテムを<div class="item-wrapper">で囲みたい場合は、以下のjQueryコードを使用します。

$('li').wrap('<div class="item-wrapper"></div>');

実行後、HTMLは以下のように変更されます。

<ul>
<div class="item-wrapper">
<li>リストアイテム1</li>
</div>
<div class="item-wrapper">
<li>リストアイテム2</li>
</div>
<div class="item-wrapper">
<li>リストアイテム3</li>
</div>
</ul>

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>.wrap() の例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('li').wrap('<div class="item-wrapper"></div>');
});
</script>
<style>
.item-wrapper {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</ul>
</body>
</html>

.wrapAll() メソッド

.wrapAll() メソッドは、選択した**全ての要素**を指定したHTML構造で**まとめて**囲みます。

構文:

$(selector).wrapAll(wrappingElement);

引数:

  • `wrappingElement`: 要素を囲むHTML構造。文字列、jQueryオブジェクト、DOM要素を指定できます。

例:

先ほどのHTMLコードを使って、全てのリストアイテムを<div class="list-wrapper">で囲みたい場合は、以下のjQueryコードを使用します。

$('li').wrapAll('<div class="list-wrapper"></div>');

実行後、HTMLは以下のように変更されます。

<ul>
<div class="list-wrapper">
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</div>
</ul>

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>.wrapAll() の例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('li').wrapAll('<div class="list-wrapper"></div>');
});
</script>
<style>
.list-wrapper {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</ul>
</body>
</html>

.wrap() と .wrapAll() の違い

メソッド 動作
.wrap() 選択した**各要素**を指定したHTML構造で囲む
.wrapAll() 選択した**全ての要素**を指定したHTML構造で**まとめて**囲む

まとめ

jQueryの.wrap() と .wrapAll() メソッドを使うことで、簡単に要素を他の要素で囲むことができます。それぞれのメソッドの動作の違いを理解し、適切に使い分けることで、より効率的にHTML要素を操作することができます。

参考文献

よくある質問

Q1: .wrap() メソッドで、複数の要素を異なるHTML構造で囲むことはできますか？
A1: いいえ、.wrap() メソッドは、選択した全ての要素に同じHTML構造を適用します。異なるHTML構造を適用したい場合は、.each() メソッドと組み合わせて個別に処理する必要があります。
Q2: .wrap() メソッドで、既存の要素の子要素として追加することはできますか？
A2: .wrap() メソッドは、選択した要素を囲む新しい要素を作成します。既存の要素の子要素として追加したい場合は、.append() や .prepend() などのメソッドを使用する必要があります。
Q3: .wrapAll() メソッドで、選択した要素が異なる親要素に存在する場合、どのように動作しますか？
A3: .wrapAll() メソッドは、選択した全ての要素を最初の要素の親要素に移動し、まとめて囲みます。つまり、異なる親要素に存在する要素を選択した場合、それらの要素は全て最初の要素の親要素の子要素として移動されます。

その他の参考記事:jquery wrap