jQuery Tutorial
wrapAll() method is used to insert (wrap) an HTML structure around all elements in the set of matched HTML elements.
.wrapAll(HTMLElements)
HTMLElements type can be any one of selector, element, HTML string, or jQuery object specifying the HTML structure to wrap around all the matched HTML elements.
If selector matching more than one element or jQuery object is the collection, then the first element will be used.
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $(".codingpointer").wrapAll("<div class='wrapper'></div>"); }); </script> </head> <body> <p>Test Section</p> <div> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> </div> </body> </html>HTML document structure is updated as below once wrapAll method is executed.
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $(".codingpointer").wrap("<div class='wrapper'></div>"); }); </script> </head> <body> <p>Test Section</p> <div> <div class='wrapper'> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> </div> </div> </body> </html>Output:
Test Section
jQuery1jQuery2
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $( ".codingpointer" ).wrapAll(function(index) { return "<div class='wrapper" + (index+1) + "'></div>"; }); }); </script> </head> <body> <p>Test Section</p> <div> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> </div> </body> </html>HTML document structure is updated as below once wrapAll method is executed.
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $( ".codingpointer" ).wrapAll(function(index) { return "<div class='wrapper" + (index+1) + "'></div>"; }); }); </script> </head> <body> <p>Test Section</p> <div> <div class='wrapper1'> <div class="codingpointer">jQuery1</div> </div> <div class='wrapper2'> <div class="codingpointer">jQuery2</div> </div> </div> </body> </html>Output:
Test Section
jQuery1jQuery2
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } .codingpointer { background: yellow; margin: 4px; font-size: 14px; } .inner { background: green; padding: 10px; margin:4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $( ".codingpointer" ).wrapAll($('.wrapper')); }); </script> </head> <body> <div class='wrapper'><div class='inner'></div></div> <div> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> </div> </body> </html>HTML document structure is updated as below once wrapAll method is executed.
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } .codingpointer { background: yellow; margin: 4px; font-size: 14px; } .inner{ background: green; padding: 10px; margin:4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $( ".codingpointer" ).wrapAll($('.wrapper')); }); </script> </head> <body> <div class='wrapper'><div class='inner'></div></div> <div> <div class='wrapper'><div class='inner'> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> </div></div> </div> </body> </html>Output:
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } .codingpointer { background: yellow; margin: 4px; font-size: 14px; } .inner { background: green; padding: 10px; margin:4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $( ".codingpointer" ).wrapAll($('.wrapper')); }); </script> </head> <body> <div class='wrapper'><div class='inner></div></div> <div> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> </div> <div> <div class="codingpointer">jQuery3</div></div> </body> </html>HTML document structure is updated as below once wrapAll method is executed.
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } .codingpointer { background: yellow; margin: 4px; font-size: 14px; } .inner { background: green; padding: 10px; margin:4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $( ".codingpointer" ).wrapAll($('.wrapper')); }); </script> </head> <body> <div class='wrapper'><div class='inner></div></div> <div> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> <div class="codingpointer">jQuery3</div> </div> <div> </div> </body> </html>Output:
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page