勉強したことのメモ

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にてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法

jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

formのtextareaに文字を入力した内容をリアルタイムプレビューする方法

textarea内に書いた内容をリアルタイムでプレビューする機能が必要になった。 ...

ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...

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

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