jQuery .wrap() 不环绕克隆的元素答案

【问题标题】：jQuery .wrap() not wrapping around a cloned elementjQuery .wrap() 不环绕克隆的元素
【发布时间】：2012-01-21 20:25:01
【问题描述】：

(function($) {
  $.extend({
    notify: function(options, duration) {
      var defaults = {
        inline: true,
        href: '',
        html: ''
      };
      var options = $.extend(defaults, options);

      var body = $('body'),
        container = $('<ul></ul>').attr('id', 'notification_area'),
        wrapper = '<li class="notification"></li>',
        clone;

      if (!body.hasClass('notifications_active')) {
        body.append(container).addClass('notifications_active');
      }

      if (options.inline == true && options.href) {
        clone = $(options.href).clone().wrap(wrapper);
      }

      clone.css('visibility', 'hidden').appendTo(container);

      var clone_height = 0 - parseInt(clone.outerHeight());
      clone.css('marginBottom', clone_height);

      clone.animate({
        marginBottom: 0
      }, 'fast', function() {
        clone.hide().css('visibility', 'visible').fadeIn('fast');
      });
    }
  });
})(jQuery);

$(function() {
  $('a').click(function() {
    $.notify({
      inline: true,
      href: '#alert'
    }, 3000)
  })
})

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

http://jsfiddle.net/sambenson/RmkEN/

在上面的示例中，我正在克隆一个元素并尝试用 <li></li> 包装它，但克隆根本没有被包装。为什么？

【问题讨论】：

标签： javascript jquery clone

【解决方案1】：

关键是.wrap() documentation中的这一行：

此方法返回原始元素集以进行链接。

.wrap() 只对 DOM 中已经存在的元素进行操作。所以，你需要插入它，然后包装它。

【讨论】：

不，您不必这样做。 jQuery 可以对任何 DOM 元素进行操作，无论它们是否在 DOM 中。关键部分（和误导部分）是 .wrap 返回内部元素，而不是包装子元素的父元素。如果你想得到它，你必须像下面的控制台测试代码那样编写 .parent： $('
').wrap($('
')).parent()
正如@DénesPapp 指出的那样，元素不需要在DOM 中。由于这是公认的答案，如果删除错误信息会很好。

【解决方案2】：

令人困惑的是.wrap() 返回的是内部元素，而不是父元素。

所以你必须使用被包装对象的 parent 对象，如下所示：

var $divA= $("<div/>").addClass('classA'),
    $divB= $("<div/>").addClass('classB');

console.log( $divA.wrap($divB).parent() );

（$divA.parent() 等于 $divB 换行后）

所以关键部分是$divA.wrap($divB) 返回$divA，而不是$divB

查看参考资料：

此方法返回用于链接的原始元素集目的。

请注意：元素不必在 DOM 中，jQuery 可以对它们进行操作，而无需将它们插入到 DOM 中。

【讨论】：