jQuery理解`wrap`

Posted 2021-03-27

我有一些语法理解问题。

我正在尝试使用div，克隆它，将克隆包装在两个新生成的div中，然后在关闭BODY标记之前将它全部粘贴到D​​OM中。这就是我所拥有的：

$('.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 live example：http://jsbin.com/upedox/4/

这不是我期待它做的事情，所以显然我不完全理解wrap。我想要发生的是最终得到我的div（红色边框）的副本，其中包含两个div（一个带有绿色和蓝色边框），然后插入现有div之后。

反而发生的是div被克隆了，但是没有用其他div包裹但是，它的内容只是插入到我用它包装的最后一个div中（所以我最终得到了一个克隆的绿色边框div）它坚持在现有的div之上。

我用包裹误解了什么？

答案

正如我解释的那样，想象如下：

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

如果你想在一个bar div中包装foo，你可以调用它：

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

而不是$ r导致<div class="bar"><div class="foo">Bar</div></div>（正如你所期待的那样）你实际得到的是原始的<div class="foo">Bar</div>（并且在DOM中它被<div class="bar"></div>包裹）。

所以，相反（考虑到你正在克隆它而不是直接在DOM中工作）使用append代替：

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

另一答案

$($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');
    });
});