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>');
リファレンスは以下になる。
関連記事
AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...
フォームのpasswordとtextをjQueryで切り替えて
パスワード入力の際、大抵「●●●」みたいな形で隠されるが、 jQueryでそれを ...
jQueryのanimate()でページスクロール後に他の処理を実行させる方法
jQueryのanimate()でページスクロール後に特定の要素を非表示にしたい ...
ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...