jQuery｢wrapInner｣で特定の子要素をタグで囲う

2020年4月13日

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

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

.wrapInner()の構文

$("セレクタ").wrapInner("<タグ></タグ>");CodeHere（ペースト）

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

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

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

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

jQueryで.wrapInner()を使って、特定の子要素をタグで囲う例

jQuery

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

HTML （jQuery反映前）

<div class="box">
 <p>タグで囲う</p>
 <p>タグで囲う</p>
 <p>タグで囲う</p>
</div>

HTML （jQuery反映後）

<div class="box">
 <section>
  <p>タグで囲う</p>
  <p>タグで囲う</p>
  <p>タグで囲う</p>
 </section>
</div>

このように書く事で$(".box")の子要素をまとめて<section></section>で囲う事ができた。

.wrapInner()で複数の特定子要素を、タグで囲う場合

先程の例の簡単な応用だが$(".nav li")としてli子要素全てに適用させてる例を確認しておこう。

jQuery

$(function(){
 $(".nav li").wrapInner('<span class="test">');
});

HTML （jQuery反映前）

<ul class="nav">
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
</ul>

HTML （jQuery反映後）

<ul class="nav">
 <li><span class="test">リスト1</span></li>
 <li><span class="test">リスト2</span></li>
 <li><span class="test">リスト3</span></li>
</ul>

このように指定の要素が「複数」あったり、その「子要素にタグが含まれない裸の状態」の場合でもすべて<span class="test"></span>で囲われる事になるのだ。

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

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

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

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

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

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

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

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

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

スクール選びのポイント