Added support for .wrapInner() and .wrapAll() - and re-wrote .wrap() to use .wrapAll(). (Fixes bug #1296)

This commit is contained in:
John Resig 2007-08-31 05:33:43 +00:00
parent 85afa7c1ba
commit e3263063e4
2 changed files with 60 additions and 25 deletions

View file

@ -348,20 +348,50 @@ test("wrap(String|Element)", function() {
ok( result.text() == defaultText, 'Check for element wrapping' );
reset();
//stop();
$('#check1').click(function() {
var checkbox = this;
ok( checkbox.checked, "Checkbox's state is erased after wrap() action, see #769" );
$(checkbox).wrap( '<div id="c1" style="display:none;"></div>' );
ok( checkbox.checked, "Checkbox's state is erased after wrap() action, see #769" );
// use a fade in to check state after this event handler has finished
/*setTimeout(function() {
ok( !checkbox.checked, "Checkbox's state is erased after wrap() action, see #769" );
start();
}, 100);*/
}).click();
});
test("wrapAll(String|Element)", function() {
expect(8);
var prev = $("#first")[0].previousSibling;
var p = $("#first")[0].parentNode;
var result = $('#first,#firstp').wrapAll('<div class="red"><div id="tmp"></div></div>');
equals( result.parent().length, 1, 'Check for wrapping of on-the-fly html' );
ok( $('#first').parent().parent().is('.red'), 'Check if wrapper has class "red"' );
ok( $('#firstp').parent().parent().is('.red'), 'Check if wrapper has class "red"' );
equals( $("#first").parent().parent()[0].previousSibling, prev, "Correct Previous Sibling" );
equals( $("#first").parent().parent()[0].parentNode, p, "Correct Parent" );
reset();
var prev = $("#first")[0].previousSibling;
var p = $("#first")[0].parentNode;
var result = $('#first,#firstp').wrapAll(document.getElementById('empty'));
equals( $("#first").parent()[0], $("#firstp").parent()[0], "Same Parent" );
equals( $("#first").parent()[0].previousSibling, prev, "Correct Previous Sibling" );
equals( $("#first").parent()[0].parentNode, p, "Correct Parent" );
});
test("wrapInner(String|Element)", function() {
expect(6);
var num = $("#first").children().length;
var result = $('#first').wrapInner('<div class="red"><div id="tmp"></div></div>');
equals( $("#first").children().length, 1, "Only one child" );
ok( $("#first").children().is(".red"), "Verify Right Element" );
equals( $("#first").children().children().children().length, num, "Verify Elements Intact" );
reset();
var num = $("#first").children().length;
var result = $('#first').wrapInner(document.getElementById('empty'));
equals( $("#first").children().length, 1, "Only one child" );
ok( $("#first").children().is("#empty"), "Verify Right Element" );
equals( $("#first").children().children().length, num, "Verify Elements Intact" );
});
test("append(String|Element|Array&lt;Element&gt;|jQuery)", function() {
expect(18);
var defaultText = 'Try them out:'

41
src/jquery/jquery.js vendored
View file

@ -163,7 +163,7 @@ jQuery.fn = jQuery.prototype = {
if ( m && (m[1] || !c) ) {
// HANDLE: $(html) -> $(array)
if ( m[1] )
a = jQuery.clean( [ m[1] ] );
a = jQuery.clean( [ m[1] ], c );
// HANDLE: $("#id")
else {
@ -646,27 +646,32 @@ jQuery.fn = jQuery.prototype = {
* @param Element elem A DOM element that will be wrapped around the target.
* @cat DOM/Manipulation
*/
wrap: function() {
wrapAll: function(html) {
if ( this[0] )
// The elements to wrap the target around
var a, args = arguments;
jQuery(html, this[0].ownerDocument)
.clone()
.insertBefore(this[0])
.map(function(){
var elem = this;
while ( elem.firstChild )
elem = elem.firstChild;
return elem;
})
.append(this);
// Wrap each of the matched elements individually
return this;
},
wrapInner: function(html) {
return this.each(function(){
if ( !a )
a = jQuery.clean(args, this.ownerDocument);
jQuery(this).contents().wrapAll(html);
});
},
// Clone the structure that we're using to wrap
var b = a[0].cloneNode(true);
// Insert it before the element to be wrapped
this.parentNode.insertBefore( b, this );
// Find the deepest point in the wrap structure
while ( b.firstChild )
b = b.firstChild;
// Move the matched element to within the wrap structure
b.appendChild( this );
wrap: function(html) {
return this.each(function(){
jQuery(this).wrapAll(html);
});
},