jQueryで対象の要素をまとめて親要素で囲む方法
2023/10/27
あるシステムで出力されている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>');
リファレンスは以下になる。
関連記事
-
-
フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法
お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...
-
-
pjaxについてのメモ
ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...
-
-
jQueryでチェックボックスの全チェック&チェック解除する方法
フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...
-
-
jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...
-
-
エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...