jQuery .wrap () не оборачивается вокруг клонированного элемента - PullRequest
Новая
       6

jQuery .wrap () не оборачивается вокруг клонированного элемента

12 голосов
/ 16 декабря 2011 

(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/

В приведенном выше примере я клонирую элемент и пытаюсь обернуть его с помощью <li></li>, но клон вообще не переносится. Почему?

Ответы [ 2 ]

22 голосов
/ 29 декабря 2012

Запутывающей частью могло быть для вас то, что .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.

17 голосов
/ 16 декабря 2011

Ключ - эта строка в документации .wrap () :

Этот метод возвращает исходный набор элементов для создания цепочек.

.wrap () работает только с элементом уже в DOM.Итак, вам нужно будет вставить его, а затем обернуть.

...