jQuery逆引きリファレンス

jQuery逆引きリファレンス

現在の要素セットを特定の要素でラップするには? ― wrap/wrapAll/wrapInnerメソッド

2016年10月6日

現在の要素セットを新要素でラップする(=新要素の子要素にする)方法を解説。メソッドを使い分けることで、要素セットに対して個々に要素全体を/全ての要素をまとめて/個々に中身(=子要素)のみをラップできる。

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

 現在の要素セットを包み込むように(=現在の要素セットが子要素になるように)新たな要素を追加するには、wrapwrapAllwrapInnerメソッドを利用します。それぞれ見た目は似たようなメソッドなので、以下ではそれぞれの違いが理解しやすいよう、サンプルを交えながら解説していきます。

それぞれの要素をラップする

 まず、wrapメソッドは、現在の要素セットに含まれるそれぞれの要素を、指定された要素でラップします。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="main">
  <p>大人のためのバイエル</p>
  <p>ツェルニー100番練習曲</p>
  <p>ブルグミュラー25の練習曲</p>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
  $('#main > p').wrap('<div style="border: solid 2px Blue"></div>');
});
</script>
</body>
</html>
リスト1 wrapメソッドを利用したコード(wrap.html)
図1 個々の<p>要素に対して<div>要素が適用された
図1 個々の<p>要素に対して<div>要素が適用された

 ブラウザーの開発者ツールなどから確認してみると、以下のようなHTMLソースが生成されていることが確認できます。

HTML
<div id="main">
  <div style="border: solid 2px Blue"><p>大人のためのバイエル</p></div>
  <div style="border: solid 2px Blue"><p>ツェルニー100番練習曲</p></div>
  <div style="border: solid 2px Blue"><p>ブルグミュラー25の練習曲</p></div>
</div>
リスト2 個々の<p>要素が<div>要素でラッピングされる

全ての要素をまとめてラップする

 wrapAllメソッドは、現在の要素セットを指定された要素でまとめてラップします。以下は、先ほどのリストの太字部分をwrapAllメソッドで書き換えたものです。

JavaScript
$('#main > p').wrapAll('<div style="border: solid 2px Blue"></div>');
リスト3 wrapAllメソッドを利用したコード(wrap.html)
図2 全ての<p>要素がまとめて<div>要素で囲まれた
図2 全ての<p>要素がまとめて<div>要素で囲まれた

 同じく開発者ツールから確認した、加工後のHTMLソースは以下の通りです。

HTML
<div id="main">
  <div style="border: solid 2px Blue">
    <p>大人のためのバイエル</p>
    <p>ツェルニー100番練習曲</p>
    <p>ブルグミュラー25の練習曲</p>
  </div>
</div>
リスト4 全ての<p>要素群がまとめて<div>要素でラッピングされる

 ただし、該当する要素の間に異なる要素が混在している場合、wrapAllメソッドはその要素だけを後ろに追い出します。

HTML
<div id="main">
  <p>大人のためのバイエル</p>
    <a href="adults.html">(大人のためのピアノ教本)</a>
  <p>ツェルニー100番練習曲</p>
  <p>ブルグミュラー25の練習曲</p>
</div>
リスト5 間に他の要素が混じっている場合の例(wrapAll.html)
図3 間の要素が追い出される
図3 間の要素が追い出される

 加工後のHTMLソースは以下のようになります。

HTML
<div id="main">
  <div style="border: solid 2px Blue">
    <p>大人のためのバイエル</p>
    <p>ツェルニー100番練習曲</p>
    <p>ブルグミュラー25の練習曲</p>
  </div>
  <a href="adults.html">(大人のためのピアノ教本)</a>
</div>
リスト6 間に挟まっていた<a>要素は<div>要素の外に追い出された

要素の中身をラップする

 wrapInnerメソッドは、「要素セット個々の要素をラップする」という意味で、wrapメソッドと似ています。しかし、wrapメソッドが要素そのものをラップするのに対して、wrapInnerメソッドは要素配下(本体)だけをラップします。

 同じく、最初のリストの太字部分をwrapInnerメソッドで置き換えてみましょう。

JavaScript
$('#main > p').wrapInner('<div style="border: solid 2px Blue"></div>');
リスト7 wrapInnerメソッドを利用したコード(wrap.html)
図4 個々の<p>要素配下に対して<div>要素で追加された
図4 個々の<p>要素配下に対して<div>要素で追加された

 開発者ツールから生成されたHTMLソースも確認しておきます。

HTML
<div id="main">
  <p><div style="border: solid 2px Blue">大人のためのバイエル</div></p>
  <p><div style="border: solid 2px Blue">ツェルニー100番練習曲</div></p>
  <p><div style="border: solid 2px Blue">ブルグミュラー25の練習曲</div></p>
</div>
リスト8 個々の<p>要素配下のコンテンツが<div>要素でラッピングされる
処理対象:要素のラップ カテゴリ:要素
API:jQuery() カテゴリ:Core(コア)
API:.wrap()|.wrapAll()|.wrapInner() カテゴリ:Manipulation(操作) > DOM Insertion, Around(DOM挿入、周辺)

※以下では、本稿の前後を合わせて5回分(第53回~第57回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

53. 既存の要素を別の場所に移動するには? ― insertBefore/insertAfter/prependTo/appendToメソッド

既存の要素を、指定した要素の直前/直後/子要素先頭/子要素末尾の位置に移動する方法を説明する。

54. 既存の要素を別の要素で置き換えるには? ― replaceWith/replaceAllメソッド

既存の要素を選択し、それをHTML文字列により生成した新規要素もしくはjQueryオブジェクトで置き換える方法を解説。また結果は同じになるが少し手順を変えて、HTML文字列による新規要素もしくはjQueryオブジェクトで既存の要素を置き換える方法も説明する。

55. 【現在、表示中】≫ 現在の要素セットを特定の要素でラップするには? ― wrap/wrapAll/wrapInnerメソッド

現在の要素セットを新要素でラップする(=新要素の子要素にする)方法を解説。メソッドを使い分けることで、要素セットに対して個々に要素全体を/全ての要素をまとめて/個々に中身(=子要素)のみをラップできる。

56. 既存の要素を削除するには? ― remove/emptyメソッド

指定した要素そのもの/要素の中身(=子要素)を削除する方法を説明する。

57. 既存の要素をコピーするには? ― cloneメソッド

既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。

GrapeCity Garage 記事内容の紹介

Azure Central の記事内容の紹介

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社