(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/
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.
Any ideas why?
The confusing part might have been to You 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$divB
after the wrapping)So the key part is that
$divA.wrap($divB)
returns$divA
, NOT$divB
see the reference:
Please note: The elements DON'T have to be in the DOM, jQuery can operate on them without already having been inserted into the 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.