jQuery理解`wrap`

Question

我有一些语法理解上的问题。

我正在尝试获取一个div，克隆它，将克隆包装在两个新生成的div中，然后将其全部放入DOM中，就在结束BODY标记之前。这就是我所拥有的：

$('.myDiv').click(function(){
    var $myDiv = $(this).clone();

    var $myWrapper1 = $('div').css('border','10px solid blue');
    var $myWrapper2 = $('div').css('border','10px solid green');

    $myDiv.wrap($myWrapper1).wrap($myWrapper2).appendTo('body');
});

jsbin实时示例：http://jsbin.com/upedox/4/

这并不是我期望它做的事情，所以很明显我没有完全理解wrap。我想要的是得到一个div (红色边框)的副本，其中包含两个div (一个带有绿色和蓝色边框)，然后将其插入到现有div之后。

相反，发生的是div被克隆，但没有与其他div一起包装，相反，它的内容只是插入到我包装它的最后一个div中(所以我最终得到了一个克隆的绿色边框div)，并将其放在现有div的上方。

我对wrap有什么误解？

Answer 1

正如我所解释的，想象一下：

<div class="foo">Bar</div>

如果您想在bar div中包装foo，您可以将其命名为：

var $r = $('.foo').wrap($('<div>',{class:'bar'}));

实际上，您得到的不是导致<div class="bar"><div class="foo">Bar</div></div>的$r (正如您所期望的那样)，而是原始的<div class="foo">Bar</div> (并且在DOM内部，它已经被<div class="bar"></div>包装)。

因此，请改用append (考虑到您是在克隆它，而不是直接在DOM中工作)：

var $orig = $('.foo').clone();

var $firstWrap = $('<div>',{class:'bar'});
var $secondWrap = $('<div>',{class:'baz'});

var $r = $secondWrap.append($firstWrap.append($orig));

现在，上面的代码里面有<div class="baz"><div class="bar"><div class="foo">Bar</div></div></div> (就像你想要的一样)，然后你就可以appendTo('body')它了

live demo

Answer 2

$($myDiv).wrap($myWrapper1)返回$myDiv，它不包含包装的元素。

代码应该如下所示。

$('document').ready(function(){
    $('.myDiv').click(function(){
        var $myDiv = $(this).clone();

        var $myWrapper1 = $('<div>').css('border','10px solid blue');
        var $myWrapper2 = $('<div>').css('border','10px solid green');
        $myDiv.wrap($myWrapper1).parent()
            .wrap($myWrapper2).parent()
            .appendTo('body');
    });
});