javascript - 将每个直接的对象组(包括文本)包装在新的 div 中，但 div 除外

Question

我试图将不是 div 的每个直接对象组包装在包装类中。有什么办法吗

输入:

var $code = 
'Lorem Ipsum
 <p>Foo Bar</p>
 <div class="myclass"></div>
 <p>Foo Bar</p>
 <div class="myclass"></div>'

var $object = $('<div/>').html($code);

想要的输出:

 <div class="wrap">
    Lorem Ipsum
    <p>Foo Bar</p>
 </div>
 <div class="myclass"></div>
 <div class="wrap">
    <p>Foo Bar</p>
 </div>
 <div class="myclass"></div>

我尝试过的:

 $object.contents().not('> .myclass').wrap('<div class="wrap"></div>');

有人可以帮我吗？我被困在这里了。

非常感谢!

Answer 1

还没有检查是否有更优化的方法来做到这一点，但你就可以了

var code =
    'Lorem Ipsum<p>Foo Bar</p><div class="myclass"></div><p>Foo Bar</p><div class="myclass"></div>'

var $object = $('<div/>').html(code);

var $obj = $();
$object.contents().each(function () {
    if ($(this).hasClass('myclass')) {
        $obj.wrapAll('<div class="wrap"/>');
        $obj = $();
    } else {
        $obj = $obj.add(this)
    }
})
$obj.wrapAll('<div class="wrap"/>');

演示:Fiddle