jQuery

jQueryで親要素を追加する方法(wrap,wrapAll,wrapInner)

本記事では、jQueryで親要素を追加するwrap・wrapAll・wrapInnerの使い方と違いについて解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

wrapメソッドの使い方

wrapメソッドは、$(“要素名”)で指定した対象の要素に対して新しく親要素としてタグを追加し要素を囲います。対象の要素が複数ある場合は、各要素ごとに親要素を作成します。

wrapメソッドの使い方は以下のとおりです。

$("要素名").wrap("タグ");

wrapメソッドを使ったサンプルコードと実行結果は以下のとおりです。

<div class="content-a1">
  <p>コンテンツA</p>
</div>
<div class="content-b1">
  <p>コンテンツB</p>
</div>
<div class="content-b1">
  <p>コンテンツB</p>
</div>
<div class="content-c1">
  <p>コンテンツC</p>
</div>
<button id="trigger-btn1">親要素を作成する</button>
.bg-skyblue{
  background:skyblue;
}
$("#trigger-btn1").on("click",function(){
  $(".content-b1").wrap("<div class='bg-skyblue'></div>");
});
サンプルコード動作確認

コンテンツA

コンテンツB

コンテンツB

コンテンツC

実行後のDOM
<div class="content-a1">
  <p>コンテンツA</p>
</div>
<div class="bg-skyblue">
  <div class="content-b1">
    <p>コンテンツB</p>
  </div>
</div>
<div class="bg-skyblue">
  <div class="content-b1">
    <p>コンテンツB</p>
  </div>
</div>
<div class="content-c1">
  <p>コンテンツC</p>
</div>

wrapAllメソッドの使い方

wrapAllメソッドは、wrapメソッドと同様に$(“要素名”)で指定した対象の要素に対して新しく親要素としてタグを追加し要素を囲います。

2つの異なる点は対象の要素が複数ある存在する場合、wrapメソッドは各要素に対して親要素を追加していましたが、wrapAllメソッドは対象となる要素を一つにまとめて親要素を追加します。

wrapAllメソッドの使い方は以下のとおりです。

$("要素名").wrapAll("タグ");

wrapAllメソッドを使ったサンプルコードと実行結果は以下のとおりです。

<div class="content-a2">
  <p>コンテンツA</p>
</div>
<div class="content-b2">
  <p>コンテンツB</p>
</div>
<div class="content-b2">
  <p>コンテンツB</p>
</div>
<div class="content-c2">
  <p>コンテンツC</p>
</div>
<button id="trigger-btn2">親要素を作成する</button>
.bg-yellow{
  background:yellow;
}
$("#trigger-btn2").on("click",function(){
  $(".content-b2").wrapAll("<div class='bg-yellow'></div>");
});
サンプルコード動作確認

コンテンツA

コンテンツB

コンテンツB

コンテンツC

実行後のDOM
<div class="content-a2">
  <p>コンテンツA</p>
</div>
<div class="bg-yellow">
  <div class="content-b2">
    <p>コンテンツB</p>
  </div>
  <div class="content-b2">
    <p>コンテンツB</p>
  </div>
</div>
<div class="content-c2">
  <p>コンテンツC</p>
</div>

wrapInnerメソッドの使い方

wrapInnerメソッドは、$(“要素名”)で指定した対象の要素内にある子要素に対してタグを囲います。

wrapInnerメソッドの使い方は以下のとおりです。

$("要素名").wrapInner("タグ");

wrapInnerメソッドを使ったサンプルコードと実行結果は以下のとおりです。

<div class="content-a3">
  コンテンツA
</div>
<div class="content-b3">
  コンテンツB
</div>
<div class="content-b3">
  コンテンツB
</div>
<div class="content-c3">
  コンテンツC
</div>
<button id="trigger-btn3">親要素を作成する</button>
.c-red{
  color:red;
}
$("#trigger-btn3").on("click",function(){
  $(".content-b3").wrapInner("<p class='c-red'></p>");
});
サンプルコード動作確認
コンテンツA
コンテンツB
コンテンツB
コンテンツC
実行後のDOM
<div class="content-a3">
  コンテンツA
</div>
<div class="content-b3">
  <p class="c-red">コンテンツB</p>
</div>
<div class="content-b3">
  <p class="c-red">コンテンツB</p>
</div>
<div class="content-c3">
  コンテンツC
</div>

要素追加の関連記事

jQueryで指定要素の前に要素を追加する方法(prepend,before)本記事では、jQueryで指定要素の前に新しい要素を追加するprepend()・prependTo()・before()・insertBefore()の使い方と違いについて解説しています。...
jQueryで指定要素の後に要素を追加する方法(append,after)本記事では、jQueryで指定要素の後に新しい要素を追加するappend()・appendTo()・after()・insertAfter()の使い方と違いについて解説しています。...

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村