(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/
在上面的示例中,我正在克隆一个元素并尝试用 and <li></li>
将其包装起来但克隆根本没有被包裹。为什么?
最佳答案
令人困惑的部分是 .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
参见引用资料:
This method returns the original set of elements for chaining purposes.
请注意: 元素不必位于 DOM 中,jQuery 可以在它们尚未插入到 DOM 中的情况下对其进行操作。
关于javascript - jQuery .wrap() 没有环绕克隆的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8531979/