jQuery wrapAll() jQuerywrapAll()|jQuery

本文概述

jQuery wrapAll()方法的参数
jQuery wrapAll()方法的示例
jQuery wrapAll()示例2
jQuery wrapAll()示例3

jQuery wrapAll()方法用于将指定的HTML元素包装在一组匹配的元素中的所有选定元素周围。
句法：

$(selector).wrapAll(wrappingElement)

jQuery wrapAll()方法的参数

参数	描述
wrappingElement	它是必填参数。它指定环绕所选元素的HTML元素。其可能的值为：HTML元素jQuery对象DOM元素

jQuery wrapAll()方法的示例让我们以一个示例来演示jQuery wrapAll()方法。

< !DOCTYPE html> < html> < head> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> < /script> < script> $(document).ready(function(){ $("button").click(function(){ $("p").wrapAll("< div> < /div> "); }); }); < /script> < style> div{background-color: pink; } < /style> < /head> < body> < p> Hello Guys!< /p> < p> This is srcmini.com< /p> < button> Wrap a div element around all p elements< /button> < /body> < /html>

【jQuery wrapAll()】立即测试
jQuery wrapAll()示例2

< !DOCTYPE html> < html> < head> < title> The jQuery Example< /title> < script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> < /script> < script type="text/javascript" language="javascript"> $(document).ready(function() { $("div").click(function () { var content = "< div class='div'> < /div> "; $("div").wrapAll( content ); }); }); < /script> < style> .div{ margin:5px; padding:2px; border:2px solid #666; width:60px; } < /style> < /head> < body> < p> Click on any square to wrap the squares into a new square:< /p> < div class="div" id="destination"> We are going to wrap this text< /div> < div class="div" style="background-color:orange; "> ONE< /div> < div class="div" style="background-color:yellow; "> TWO< /div> < div class="div" style="background-color:green; "> THREE< /div> < /body> < /html>

立即测试
jQuery wrapAll()示例3一个带有打开按钮的wrapAll()示例：

< !DOCTYPE html> < html> < head> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> < /script> < script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").wrapAll("< div> < /div> "); }); $("#btn2").click(function(){ $("p").unwrap(); }); }); < /script> < style> div{background-color: pink; } < /style> < /head> < body> < p> Hello Guys!< /p> < p> This is srcmini.com< /p> < button id="btn1"> Wrap a div element around all p element< /button> < button id="btn2"> Unwrap< /button> < /body> < /html>

立即测试