jQuery wrap() jQuerywrap()|jQuery

本文概述

jQuery wrap()方法的参数
jQuery wrap()方法的示例
jQuery wrap()示例2

【jQuery wrap()】jQuery wrap()方法用于将指定的HTML元素包装在每个选定的元素周围。 wrap()函数可以接受可以通过$()工厂函数传递的任何字符串或对象。
句法：

$(selector).wrap(wrappingElement, function(index))

jQuery wrap()方法的参数

参数	描述
WrappingElement	它是必填参数。它指定要包装每个选定元素的HTML元素。其可能的值为：HTML元素jQuery对象DOM元素
Function(index)	它是一个可选参数。它指定一个返回包装元素的函数。索引：提供元素在集合中的索引位置。

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

< !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").wrap("< 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 each p element< /button> < /body> < /html>

立即测试
jQuery wrap()示例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> '; $("#destination").wrap( 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 text:< /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>

立即测试