異なるDOM要素複数を一つのDOM要素にまとめたい

Question

異なるDOM要素複数を一つのDOM要素にまとめたいです。

具体的には以下のDOM要素を、
■変更前

<div class="hoge1"></div>
<p class="hoge2"></p>
<span class="hoge3"></span>

以下のように<div class="hoge_wrap">でまとめたいです。
■変更後

<div class="hoge_wrap">
<div class="hoge1"></div>
<p class="hoge2"></p>
<span class="hoge3"></span>
</div>

ご教授の程よろしくお願いいたします。

Comments

[think49]

本文中に「セレクタ文字列」が見つからない為、補足をお願いします。

[castail]

すいません。認識が間違っていました。「セレクタ=DOM要素」のことです。こちらでご理解いただけますでしょうか？

[think49]

質問の意図は理解できたと思います。

Answer 1

シンプルに

$(".hoge1, .hoge2, .hoge3").wrapAll($("<div>").addClass("hoge_wrap"));

ではいかがでしょう。

Comments

[castail]

ご回答ありがとうございました。

ご教授頂いた内容で実現できました！
感謝いたします。

Answer 2

$('hoge_wrapper').append($('.hoge1, .hoge2, .hoge3'));

でどうでしょうか。
ラッパーのクラス名を変更できるなら・・・

$('wrapper').append($('[class^="hoge"]'));

こんな書き方もできますよ。

Comments

[castail]

ご回答ありがとうございます。

せっかくご回答頂いたのに恐縮ですが先にご回答頂いた「blackonyx」様をベストアンサーにさせて頂きます。

Answer 3

これでどうでしょうか？

        // 親divを作る
        var $newDiv = $('<div></div>') ;
        
        // 親divにhoge_wrapクラスを追加(色は見やすいように)
        $newDiv.addClass('hoge_wrap').css({'background-color':'#f00'})
        
        // 既存のhoge1の前に親divを入れる
        $newDiv.insertBefore($('div.hoge1')) ;
        
        // 移動したい3つの要素を移動する
        $newDiv.append($('div.hoge1'),$('p.hoge2'),$('span.hoge3')) ;

Comments

[castail]

すいません。認識が間違っていました。「セレクタ=DOM要素」のことです。こちらでご理解いただけますでしょうか？

クラス追加・クリックトリガーでの処理は難しいので再考いただけますでしょうか？