jQuery wrapInner() jQuerywrapInner()|jQuery

本文概述

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

【jQuery wrapInner()】jQuery wrapInner()方法用于在匹配的元素集中的每个元素的内容周围包装HTML结构。此方法可以接受可以传递给$()工厂函数的任何字符串或对象。
句法：

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

jQuery wrapInner()方法的参数

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

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

< !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").wrapInner("< em> < /em> "); }); }); < /script> < /head> < body> < p> Hello Guys!< /p> < p> This is srcmini.com< /p> < button> Wrap a emphasized element around the content of each p element< /button> < /body> < /html>

立即测试
你还可以使用多个元素来包装指定的内容。jQuery wrapInner()示例2

< !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").wrapInner("< em> < b> < marquee> < /marquee> < /b> < /em> "); }); }); < /script> < /head> < body> < p> Hello Guys!< /p> < p> This is srcmini.com< /p> < button> Wrap a emphasized element around the content of each p element< /button> < /body> < /html>

立即测试
在上面的示例中, 我们总共使用了三个标签：

强调了< em> … < / em> 标签
< b> … < / b> 粗体标签
< marquee> … < / marquee> 标签

jQuery wrapInner()示例3

< !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 = "< marquee> < b> < /b> < /marquee> "; $(this).wrapInner( content ); }); }); < /script> < style> .div{ margin:12px; padding:12px; border:2px solid #666; width:100px; } < /style> < /head> < body> < p> Click on any square below to see the result:< /p> < div class="div" id="destination"> srcmini.com< /div> < div class="div" style="background-color:lightpink; "> JAVA< /div> < div class="div" style="background-color:green; "> SQL< /div> < div class="div" style="background-color:lightyellow; "> HTML< /div> < /body> < /html>

立即测试