jQuery .wrap()没有包装克隆元素

Question

(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)
  })
})

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

在上面的例子中,我正在克隆一个元素并尝试用它包装,<li></li>但克隆根本没有被包装.

有什么想法吗？

Answer 1

令人困惑的部分可能是你.wrap()返回内部元素,而不是父元素.

因此,您必须使用包装的父对象,如下所示:

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的情况下对它们进行操作.

Answer 2

关键是.wrap()文档中的这一行:

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

.wrap()仅对DOM中已有的元素进行操作.所以,你需要插入它,然后包装它.