jQuery .wrap() 不环绕克隆元素
(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/sambanson/RmkEN/
在上面的示例中，我克隆了一个元素并尝试用 包装它，但克隆根本没有被包装。为什么？
(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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
令人困惑的部分是
.wrap()返回内部元素，而不是父元素。因此，您必须使用包装对象的 parent 对象，如下所示：（
$divA.parent()等于$divB之后 请因此关键部分是
$divA.wrap($divB)返回$divA，而不是$divB参阅参考：
请注意：
这些元素不必位于 DOM 中，jQuery 可以对它们进行操作，而无需将它们插入到 DOM 中。
The confusing part is that
.wrap()returns the inner element, not the parent element.So you have to use the parent object of the wrapped one as follows:
(
$divA.parent()is equal to$divBafter the wrapping)So the key part is that
$divA.wrap($divB)returns$divA, NOT$divBsee the reference:
Please note:
The elements DON'T have to be in the DOM, jQuery can operate on them without them already having been inserted into the DOM.
关键是 .wrap() 文档中的这一行：
.wrap() 仅对 DOM 中已有的元素进行操作。因此，您需要将其插入，然后包裹起来。
The key is this line in the .wrap() documentation:
.wrap() only operates on an element already in the DOM. So, you will need to insert it, then wrap it.