jQuery .wrap（）没有包装克隆元素 [英] jQuery .wrap() not wrapping around a cloned element

问题描述

< pre class =snippet-code-js lang-js prettyprint-override> （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 （容器）.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（'marginBo ttom'，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）}） }）

 < script src =https：// cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>

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

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

解决方案

关键是 .wrap（）文档：

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

.wrap（）仅对DOM中已有的元素进行操作。所以，你需要插入它，然后包装它。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

In the above example I'm cloning an element and attempting to wrap it with and <li></li> but the clone isn't being wrapped at all. Why?

解决方案

The key is this line in the .wrap() documentation:

This method returns the original set of elements for chaining purposes.

.wrap() only operates on an element already in the DOM. So, you will need to insert it, then wrap it.

这篇关于jQuery .wrap（）没有包装克隆元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！