勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryで対象の要素をまとめて親要素で囲む方法

   2023/10/27  jQuery JavaScript

あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースがあった。jQueryのbefore / afterで無理やり囲めばいいのかと思いきやうまく動かない。調べたところそれ用のメソッドが用意されていたので使い方のメモ。

 

やりたいこと

以下の#span_1 / #span_2を<div id="test">というタグで囲みたい。

<div id="div_1">
    <span id="span_1">span_1</span>
    <span id="span_2">span_2</span>
</div>

<div id="div_2">
    <span id="span_3">span_3</span>
    <span id="span_4">span_4</span>
</div>

 

ダメなパターン

$('#span_1').before('<div id="test">');
$('#span_2').after('</div>');

無理やり感はあるもののこれで行けるかと思いきや以下のような出力となった。

<div id="div_1">
    <div id="test"></div>
    <span id="span_1">span_1</span>
    <span id="span_2">span_2</span>
</div>

<div id="div_2">
    <span id="span_3">span_3</span>
    <span id="span_4">span_4</span>
</div>

 

正しい方法

$('#span_1, #span_2').wrapAll('<div id="test"></div>');

リファレンスは以下になる。

http://semooh.jp/jquery/api/manipulation/wrapAll/html/

 - jQuery JavaScript

  関連記事

jQueryのdatetimepickerでスクロール入力を無効化させる方法

日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...

CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法

CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...

jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...