wrap.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. (function() {
  2. if ( !jQuery.fn.wrap ) { // no wrap module
  3. return;
  4. }
  5. module( "wrap", {
  6. teardown: moduleTeardown
  7. });
  8. // See test/unit/manipulation.js for explanation about these 2 functions
  9. function manipulationBareObj( value ) {
  10. return value;
  11. }
  12. function manipulationFunctionReturningObj( value ) {
  13. return function() {
  14. return value;
  15. };
  16. }
  17. function testWrap( val ) {
  18. expect( 19 );
  19. var defaultText, result, j, i, cacheLength;
  20. defaultText = "Try them out:";
  21. result = jQuery("#first").wrap( val("<div class='red'><span></span></div>") ).text();
  22. equal( defaultText, result, "Check for wrapping of on-the-fly html" );
  23. ok( jQuery("#first").parent().parent().is(".red"), "Check if wrapper has class 'red'" );
  24. QUnit.reset();
  25. result = jQuery("#first").wrap( val(document.getElementById("empty")) ).parent();
  26. ok( result.is("ol"), "Check for element wrapping" );
  27. equal( result.text(), defaultText, "Check for element wrapping" );
  28. QUnit.reset();
  29. jQuery("#check1").on( "click", function() {
  30. var checkbox = this;
  31. ok( checkbox.checked, "Checkbox's state is erased after wrap() action, see #769" );
  32. jQuery( checkbox ).wrap( val("<div id='c1' style='display:none;'></div>") );
  33. ok( checkbox.checked, "Checkbox's state is erased after wrap() action, see #769" );
  34. }).prop( "checked", false )[ 0 ].click();
  35. // using contents will get comments regular, text, and comment nodes
  36. j = jQuery("#nonnodes").contents();
  37. j.wrap( val("<i></i>") );
  38. // Blackberry 4.6 doesn't maintain comments in the DOM
  39. equal( jQuery("#nonnodes > i").length, jQuery("#nonnodes")[ 0 ].childNodes.length, "Check node,textnode,comment wraps ok" );
  40. equal( jQuery("#nonnodes > i").text(), j.text(), "Check node,textnode,comment wraps doesn't hurt text" );
  41. // Try wrapping a disconnected node
  42. cacheLength = 0;
  43. for ( i in jQuery.cache ) {
  44. cacheLength++;
  45. }
  46. j = jQuery("<label/>").wrap( val("<li/>") );
  47. equal( j[ 0 ] .nodeName.toUpperCase(), "LABEL", "Element is a label" );
  48. equal( j[ 0 ].parentNode.nodeName.toUpperCase(), "LI", "Element has been wrapped" );
  49. for ( i in jQuery.cache ) {
  50. cacheLength--;
  51. }
  52. equal( cacheLength, 0, "No memory leak in jQuery.cache (bug #7165)" );
  53. // Wrap an element containing a text node
  54. j = jQuery("<span/>").wrap("<div>test</div>");
  55. equal( j[ 0 ].previousSibling.nodeType, 3, "Make sure the previous node is a text element" );
  56. equal( j[ 0 ].parentNode.nodeName.toUpperCase(), "DIV", "And that we're in the div element." );
  57. // Try to wrap an element with multiple elements (should fail)
  58. j = jQuery("<div><span></span></div>").children().wrap("<p></p><div></div>");
  59. equal( j[ 0 ].parentNode.parentNode.childNodes.length, 1, "There should only be one element wrapping." );
  60. equal( j.length, 1, "There should only be one element (no cloning)." );
  61. equal( j[ 0 ].parentNode.nodeName.toUpperCase(), "P", "The span should be in the paragraph." );
  62. // Wrap an element with a jQuery set
  63. j = jQuery("<span/>").wrap( jQuery("<div></div>") );
  64. equal( j[ 0 ].parentNode.nodeName.toLowerCase(), "div", "Wrapping works." );
  65. // Wrap an element with a jQuery set and event
  66. result = jQuery("<div></div>").on( "click", function() {
  67. ok( true, "Event triggered." );
  68. // Remove handlers on detached elements
  69. result.off();
  70. jQuery(this).off();
  71. });
  72. j = jQuery("<span/>").wrap( result );
  73. equal( j[ 0 ].parentNode.nodeName.toLowerCase(), "div", "Wrapping works." );
  74. j.parent().trigger("click");
  75. // clean up attached elements
  76. QUnit.reset();
  77. }
  78. test( "wrap(String|Element)", function() {
  79. testWrap( manipulationBareObj );
  80. });
  81. test( "wrap(Function)", function() {
  82. testWrap( manipulationFunctionReturningObj );
  83. });
  84. test( "wrap(Function) with index (#10177)", function() {
  85. var expectedIndex = 0,
  86. targets = jQuery("#qunit-fixture p");
  87. expect( targets.length );
  88. targets.wrap(function(i) {
  89. equal( i, expectedIndex, "Check if the provided index (" + i + ") is as expected (" + expectedIndex + ")" );
  90. expectedIndex++;
  91. return "<div id='wrap_index_'" + i + "'></div>";
  92. });
  93. });
  94. test( "wrap(String) consecutive elements (#10177)", function() {
  95. var targets = jQuery("#qunit-fixture p");
  96. expect( targets.length * 2 );
  97. targets.wrap("<div class='wrapper'></div>");
  98. targets.each(function() {
  99. var $this = jQuery(this);
  100. ok( $this.parent().is(".wrapper"), "Check each elements parent is correct (.wrapper)" );
  101. equal( $this.siblings().length, 0, "Each element should be wrapped individually" );
  102. });
  103. });
  104. function testWrapAll( val ) {
  105. expect( 8 );
  106. var prev, p, result;
  107. prev = jQuery("#firstp")[ 0 ].previousSibling;
  108. p = jQuery("#firstp,#first")[ 0 ].parentNode;
  109. result = jQuery("#firstp,#first").wrapAll( val("<div class='red'><div class='tmp'></div></div>") );
  110. equal( result.parent().length, 1, "Check for wrapping of on-the-fly html" );
  111. ok( jQuery("#first").parent().parent().is(".red"), "Check if wrapper has class 'red'" );
  112. ok( jQuery("#firstp").parent().parent().is(".red"), "Check if wrapper has class 'red'" );
  113. equal( jQuery("#first").parent().parent()[ 0 ].previousSibling, prev, "Correct Previous Sibling" );
  114. equal( jQuery("#first").parent().parent()[ 0 ].parentNode, p, "Correct Parent" );
  115. QUnit.reset();
  116. prev = jQuery("#firstp")[ 0 ].previousSibling;
  117. p = jQuery("#first")[ 0 ].parentNode;
  118. jQuery("#firstp,#first").wrapAll( val(document.getElementById("empty")) );
  119. equal( jQuery("#first").parent()[ 0 ], jQuery("#firstp").parent()[ 0 ], "Same Parent" );
  120. equal( jQuery("#first").parent()[ 0 ].previousSibling, prev, "Correct Previous Sibling" );
  121. equal( jQuery("#first").parent()[ 0 ].parentNode, p, "Correct Parent" );
  122. }
  123. test( "wrapAll(String|Element)", function() {
  124. testWrapAll( manipulationBareObj );
  125. });
  126. function testWrapInner( val ) {
  127. expect( 11 );
  128. var num,
  129. div = jQuery("<div/>");
  130. num = jQuery("#first").children().length;
  131. jQuery("#first").wrapInner( val("<div class='red'><div id='tmp'></div></div>") );
  132. equal( jQuery("#first").children().length, 1, "Only one child" );
  133. ok( jQuery("#first").children().is(".red"), "Verify Right Element" );
  134. equal( jQuery("#first").children().children().children().length, num, "Verify Elements Intact" );
  135. QUnit.reset();
  136. num = jQuery("#first").html("foo<div>test</div><div>test2</div>").children().length;
  137. jQuery("#first").wrapInner( val("<div class='red'><div id='tmp'></div></div>") );
  138. equal( jQuery("#first").children().length, 1, "Only one child" );
  139. ok( jQuery("#first").children().is(".red"), "Verify Right Element" );
  140. equal( jQuery("#first").children().children().children().length, num, "Verify Elements Intact" );
  141. QUnit.reset();
  142. num = jQuery("#first").children().length;
  143. jQuery("#first").wrapInner( val(document.getElementById("empty")) );
  144. equal( jQuery("#first").children().length, 1, "Only one child" );
  145. ok( jQuery("#first").children().is("#empty"), "Verify Right Element" );
  146. equal( jQuery("#first").children().children().length, num, "Verify Elements Intact" );
  147. div.wrapInner( val("<span></span>") );
  148. equal( div.children().length, 1, "The contents were wrapped." );
  149. equal( div.children()[ 0 ].nodeName.toLowerCase(), "span", "A span was inserted." );
  150. }
  151. test( "wrapInner(String|Element)", function() {
  152. testWrapInner( manipulationBareObj );
  153. });
  154. test( "wrapInner(Function)", function() {
  155. testWrapInner( manipulationFunctionReturningObj );
  156. });
  157. test( "unwrap()", function() {
  158. expect( 9 );
  159. jQuery("body").append(" <div id='unwrap' style='display: none;'> <div id='unwrap1'> <span class='unwrap'>a</span> <span class='unwrap'>b</span> </div> <div id='unwrap2'> <span class='unwrap'>c</span> <span class='unwrap'>d</span> </div> <div id='unwrap3'> <b><span class='unwrap unwrap3'>e</span></b> <b><span class='unwrap unwrap3'>f</span></b> </div> </div>");
  160. var abcd = jQuery("#unwrap1 > span, #unwrap2 > span").get(),
  161. abcdef = jQuery("#unwrap span").get();
  162. equal( jQuery("#unwrap1 span").add("#unwrap2 span:first-child").unwrap().length, 3, "make #unwrap1 and #unwrap2 go away" );
  163. deepEqual( jQuery("#unwrap > span").get(), abcd, "all four spans should still exist" );
  164. deepEqual( jQuery("#unwrap3 span").unwrap().get(), jQuery("#unwrap3 > span").get(), "make all b in #unwrap3 go away" );
  165. deepEqual( jQuery("#unwrap3 span").unwrap().get(), jQuery("#unwrap > span.unwrap3").get(), "make #unwrap3 go away" );
  166. deepEqual( jQuery("#unwrap").children().get(), abcdef, "#unwrap only contains 6 child spans" );
  167. deepEqual( jQuery("#unwrap > span").unwrap().get(), jQuery("body > span.unwrap").get(), "make the 6 spans become children of body" );
  168. deepEqual( jQuery("body > span.unwrap").unwrap().get(), jQuery("body > span.unwrap").get(), "can't unwrap children of body" );
  169. deepEqual( jQuery("body > span.unwrap").unwrap().get(), abcdef, "can't unwrap children of body" );
  170. deepEqual( jQuery("body > span.unwrap").get(), abcdef, "body contains 6 .unwrap child spans" );
  171. jQuery("body > span.unwrap").remove();
  172. });
  173. test( "jQuery(<tag>) & wrap[Inner/All]() handle unknown elems (#10667)", function() {
  174. expect( 2 );
  175. var $wraptarget = jQuery( "<div id='wrap-target'>Target</div>" ).appendTo( "#qunit-fixture" ),
  176. $section = jQuery( "<section>" ).appendTo( "#qunit-fixture" );
  177. $wraptarget.wrapAll("<aside style='background-color:green'></aside>");
  178. notEqual( $wraptarget.parent("aside").get( 0 ).style.backgroundColor, "transparent", "HTML5 elements created with wrapAll inherit styles" );
  179. notEqual( $section.get( 0 ).style.backgroundColor, "transparent", "HTML5 elements create with jQuery( string ) inherit styles" );
  180. });
  181. test( "wrapping scripts (#10470)", function() {
  182. expect( 2 );
  183. var script = document.createElement("script");
  184. script.text = script.textContent = "ok( !document.eval10470, 'script evaluated once' ); document.eval10470 = true;";
  185. document.eval10470 = false;
  186. jQuery("#qunit-fixture").empty()[0].appendChild( script );
  187. jQuery("#qunit-fixture script").wrap("<b></b>");
  188. strictEqual( script.parentNode, jQuery("#qunit-fixture > b")[ 0 ], "correctly wrapped" );
  189. jQuery( script ).remove();
  190. });
  191. })();