Added support for .before(), .after(), and .replaceWith() on disconnected DOM nodes. Fixes bug #3940.

This commit is contained in:
John Resig 2009-09-14 22:09:42 +00:00
parent bca8225413
commit 173c1477ae
2 changed files with 40 additions and 10 deletions

View file

@ -106,15 +106,29 @@ jQuery.fn.extend({
}, },
before: function() { before: function() {
return this.domManip(arguments, false, function(elem){ if ( this[0] && this[0].parentNode ) {
this.parentNode.insertBefore( elem, this ); return this.domManip(arguments, false, function(elem){
}); this.parentNode.insertBefore( elem, this );
});
} else {
var set = jQuery.isFunction(arguments[0]) ?
jQuery( arguments[0]() ) :
jQuery.apply(jQuery, arguments);
return this.pushStack( set.add( this ), "before", arguments );
}
}, },
after: function() { after: function() {
return this.domManip(arguments, false, function(elem){ if ( this[0] && this[0].parentNode ) {
this.parentNode.insertBefore( elem, this.nextSibling ); return this.domManip(arguments, false, function(elem){
}); this.parentNode.insertBefore( elem, this.nextSibling );
});
} else {
return jQuery.isFunction(arguments[0]) ?
this.add( arguments[0]() ) :
this.add.apply( this, arguments );
}
}, },
clone: function( events ) { clone: function( events ) {
@ -193,7 +207,11 @@ jQuery.fn.extend({
}, },
replaceWith: function( value ) { replaceWith: function( value ) {
return this.after( value ).remove(); if ( this[0] && this[0].parentNode ) {
return this.after( value ).remove();
} else {
return this.pushStack( jQuery(jQuery.isFunction(value) ? value() : value), "replaceWith", value );
}
}, },
detach: function( selector ) { detach: function( selector ) {

View file

@ -320,7 +320,7 @@ test("prependTo(String|Element|Array<Element>|jQuery)", function() {
}); });
var testBefore = function(val) { var testBefore = function(val) {
expect(4); expect(6);
var expected = 'This is a normal link: bugaYahoo'; var expected = 'This is a normal link: bugaYahoo';
jQuery('#yahoo').before(val( '<b>buga</b>' )); jQuery('#yahoo').before(val( '<b>buga</b>' ));
equals( expected, jQuery('#en').text(), 'Insert String before' ); equals( expected, jQuery('#en').text(), 'Insert String before' );
@ -339,6 +339,10 @@ var testBefore = function(val) {
expected = "This is a normal link: diveintomarkTry them out:Yahoo"; expected = "This is a normal link: diveintomarkTry them out:Yahoo";
jQuery('#yahoo').before(val( jQuery("#first, #mark") )); jQuery('#yahoo').before(val( jQuery("#first, #mark") ));
equals( expected, jQuery('#en').text(), "Insert jQuery before" ); equals( expected, jQuery('#en').text(), "Insert jQuery before" );
var set = jQuery("<div/>").before(val("<span>test</span>"));
equals( set[0].nodeName.toLowerCase(), "span", "Insert the element before the disconnected node." );
equals( set.length, 2, "Insert the element before the disconnected node." );
} }
test("before(String|Element|Array&lt;Element&gt;|jQuery)", function() { test("before(String|Element|Array&lt;Element&gt;|jQuery)", function() {
@ -372,7 +376,7 @@ test("insertBefore(String|Element|Array&lt;Element&gt;|jQuery)", function() {
}); });
var testAfter = function(val) { var testAfter = function(val) {
expect(4); expect(6);
var expected = 'This is a normal link: Yahoobuga'; var expected = 'This is a normal link: Yahoobuga';
jQuery('#yahoo').after(val( '<b>buga</b>' )); jQuery('#yahoo').after(val( '<b>buga</b>' ));
equals( expected, jQuery('#en').text(), 'Insert String after' ); equals( expected, jQuery('#en').text(), 'Insert String after' );
@ -391,6 +395,10 @@ var testAfter = function(val) {
expected = "This is a normal link: YahoodiveintomarkTry them out:"; expected = "This is a normal link: YahoodiveintomarkTry them out:";
jQuery('#yahoo').after(val( jQuery("#first, #mark") )); jQuery('#yahoo').after(val( jQuery("#first, #mark") ));
equals( expected, jQuery('#en').text(), "Insert jQuery after" ); equals( expected, jQuery('#en').text(), "Insert jQuery after" );
var set = jQuery("<div/>").after(val("<span>test</span>"));
equals( set[1].nodeName.toLowerCase(), "span", "Insert the element after the disconnected node." );
equals( set.length, 2, "Insert the element after the disconnected node." );
}; };
test("after(String|Element|Array&lt;Element&gt;|jQuery)", function() { test("after(String|Element|Array&lt;Element&gt;|jQuery)", function() {
@ -424,7 +432,7 @@ test("insertAfter(String|Element|Array&lt;Element&gt;|jQuery)", function() {
}); });
var testReplaceWith = function(val) { var testReplaceWith = function(val) {
expect(10); expect(12);
jQuery('#yahoo').replaceWith(val( '<b id="replace">buga</b>' )); jQuery('#yahoo').replaceWith(val( '<b id="replace">buga</b>' ));
ok( jQuery("#replace")[0], 'Replace element with string' ); ok( jQuery("#replace")[0], 'Replace element with string' );
ok( !jQuery("#yahoo")[0], 'Verify that original element is gone, after string' ); ok( !jQuery("#yahoo")[0], 'Verify that original element is gone, after string' );
@ -445,6 +453,10 @@ var testReplaceWith = function(val) {
ok( jQuery("#first")[0], 'Replace element with set of elements' ); ok( jQuery("#first")[0], 'Replace element with set of elements' );
ok( jQuery("#mark")[0], 'Replace element with set of elements' ); ok( jQuery("#mark")[0], 'Replace element with set of elements' );
ok( !jQuery("#yahoo")[0], 'Verify that original element is gone, after set of elements' ); ok( !jQuery("#yahoo")[0], 'Verify that original element is gone, after set of elements' );
var set = jQuery("<div/>").replaceWith(val("<span>test</span>"));
equals( set[0].nodeName.toLowerCase(), "span", "Replace the disconnected node." );
equals( set.length, 1, "Replace the disconnected node." );
} }
test("replaceWith(String|Element|Array&lt;Element&gt;|jQuery)", function() { test("replaceWith(String|Element|Array&lt;Element&gt;|jQuery)", function() {