jQuery｢wrapAll｣で複数の要素を指定のタグで囲う

2020年4月13日

jQueryのメソッド「.wrapAll()」は、要素を「指定のタグで囲う」事ができるメソッド。

今回は、jQueryで「複数要素を指定のタグで囲う事ができる」メソッド「.wrapAll()」について、その使い方をサンプルを交えて解説しよう。

.wrapAll()の構文

$("セレクタ").wrapAll("<タグ></タグ>");

セレクタで指定した複数の要素をパラメータで指定した「タグ」で囲う事ができる。

ちなみに、ダグの指定は次のように「閉じタグ」ありでも無しでも、どちらでも大丈夫だ。

.wrapAll("<タグ>");or.wrapAll("<タグ></タグ>");

さらに、.wrapAll('<div class="test">')のようにあらかじめ「クラスやIDをつける」事も可能だ。（シングルコーテーションとダブルコーテーションの関係に注意）

jQueryで.wrapAll()を使って、複数の要素を指定のタグで囲う例

jQuery

$(function(){
 $(".box p").wrapAll("<section>");
});

HTML （jQuery反映前）

<div class="box">
 <p>タグで囲う</p>
 <p>タグで囲う</p>
 <p>タグで囲う</p>
</div>
<p>変化なし</p>

HTML （jQuery反映後）

<div class="box">
 <section>
  <p>タグで囲う</p>
  <p>タグで囲う</p>
  <p>タグで囲う</p>
 </section>
</div>
<p>変化なし</p>

このように書く事で$(".box p")と指定された複数のPだけを<section></section>で囲う事ができた。

.wrapAll()で指定の複数の要素の間に「別の要素」がある場合

先程の例と違い、$("p")としてp要素全てに適用させて、さらにpとpの間には<div>など別の要素が存在する場合はどうなるのか、確認しておこう。

jQuery

$(function(){
 $("p").wrapAll("<section>");
});

HTML （jQuery反映前）

<div class="box">
 <p>１番目のP</p>
 <div>別の要素</div>
 <p>２番目のP</p>
 <p>３番目のP</p>
</div>
<p>別の階層のP</p>

HTML （jQuery反映後）

<div class="box">
 <section>
 <p>１番目のP</p>
 <p>２番目のP</p>
 <p>３番目のP</p>
 <p>別の階層のP</p>
 </section>
 <div>別の要素</div>
</div>

この場合、最初に出てくる<p>１番目のP</p>の後に「その他のPが集められ」、集まったPタグを<section></section>で囲われる事になるのだ。

以上、jQueryで「.wrapAll()を使って、複数の要素を指定したタグで囲う」方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう！

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント