首页 > web前端 > js教程 > 正文

jquery之wrap(),wrap(),unwrap()方法详解

巴扎黑
发布: 2017-06-24 13:53:57
原创
2676 人浏览过

wrap():为每个匹配元素外面添加指定的HTML结构,

wrapAll(): 为所有匹配元素(作为一个整体)外面添加一个指定的HTML结构wrap()函数用于在每个匹配元素外部包裹指定的HTML结构

与该函数相对的是unwrap()函数,用于当前匹配元素的父元素(只移除父元素,其内部节点全部保留)。

该函数属于<a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery</a>对象(实例)。

语法

jQueryObject.wrap( wrapper )
登录后复制

参数

参数描述
wrapperString/Element/jQuery/Function类型用于包裹匹配元素的节点。

如果参数wrapper字符串,则将其视作jQuery选择器或html字符串,jQuery会自行判断。

jQuery 1.4 新增支持:参数wrapper可以为函数。wrap()将根据匹配的所有元素遍历执行该函数,函数中的this将指向对应的DOM元素。

wrap()还会为函数传入一个参数,即当前元素在匹配元素中的索引函数的返回值就是用于包裹的节点内容(可以是html字符串、DOM元素或jQuery对象)。

注意:如果wrapper匹配多个元素,则只将第一个元素作为包裹元素。

注意:如果wrapper是多层嵌套的元素(例如),wrap()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是Element节点(比如文本节点、注释节点等),就停止向内查找,直接在当前节点内部的末尾位置追加(append())当前匹配元素。

返回值

wrap()函数的返回值为jQuery类型,返回当前jQuery对象本身(以便于进行链式风格的编程)。

注意:即使wrapper元素是当前页面中的元素,该元素也不会从原位置上消失。因为wrap()使用的是该元素的副本(克隆)来充当包裹。

示例&说明

wrap()函数用于在每个匹配元素之前的位置插入内容:

<span class="tag"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="pln"><br/><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">&#39;<p></p>&#39;<span class="pln"> <span class="pun">);<span class="pln"> <br/><span class="tag"></script><span class="pln"><br/><br/><span class="com"><!--以下是jQuery代码执行后的html内容--><span class="pln"><br/><span class="tag"><p><p><span class="pln">段落文本1<span class="tag"><span></span></p></p><span class="pln"><br/><span class="tag"><p><p><span class="pln">段落文本2<span class="tag"><span></span></p></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
登录后复制

以下面这段HTML代码为例:

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="pln"> <span class="tag">/><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">多层嵌套1<span class="tag"></span><span class="pln"><br/><span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">多层嵌套2<span class="tag"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
登录后复制

以下jQuery示例代码用于演示wrap()函数的具体用法:

<span class="com">// 在n2元素外包裹strong元素:<strong>{#n2}</strong><span class="pln"><br/>$<span class="pun">(<span class="str">"#n2"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="str">&#39;<strong/>&#39;<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n4元素外包裹form元素:<form name="myForm">{#n4}</form><span class="pln"><br/>$<span class="pun">(<span class="str">"#n4"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="str">&#39;<form name="myForm"></form>&#39;<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在每个p元素外包裹p元素:<p data_id="index">{p}</p><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">index<span class="pun">){<span class="pln"><br/>    <span class="kwd"><a href="http://www.php.cn/wiki/135.html" target="_blank">return</a><span class="pln"> <span class="str">&#39;<p data_id="&#39;<span class="pln"> <span class="pun">+<span class="pln"> index <span class="pun">+<span class="pln"> <span class="str">&#39;"></p>&#39;<span class="pun">;<span class="pln">   <br/><span class="pun">}<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n5元素外包裹嵌套的p元素:<p><p><em><b>{#n5}</b></em></p></p><span class="pln"><br/>$<span class="pun">(<span class="str">"#n5"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">&#39;<p><p><em><b></b></em></p></p>&#39;<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n6元素外包裹嵌套的p元素:<p><p> <em><b></b></em>${#n5}</p></p><span class="pln"><br/><span class="com">// wrap()会从外层p依次往内部查找,以确定n5元素的所在位置<span class="pln"><br/><span class="com">// wrap()将从外往内检查每层嵌套的第一个元素,如果该元素没有子元素或者第一个子元素不是Element节点,就停止向内查找<span class="pln"><br/><span class="com">// 由于参数的&#39;<p>&#39;后面有空格(文本节点),也就是说p元素的第一个子元素不是Element类型,因此直接将n6插入到p元素内部的末尾位置<span class="pln"><br/>$<span class="pun">(<span class="str">"#n6"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">&#39;<p><p> <em><b></b></em></p></p>&#39;<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
登录后复制

运行代码

wrap()会将包裹元素的开始标记和结束标记分别置于匹配元素的两侧,不会额外添加任何空白字符,上述代码执行后的完整html代码如下(格式未作任何调整):

<span class="tag"><p<span class="pln"> <span class="atn">data_id<span class="pun">=<span class="atv">"0"<span class="tag">><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><strong><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span></strong><span class="pln">    <br/><span class="tag"></p></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">data_id<span class="pun">=<span class="atv">"1"<span class="tag">><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><form<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"myForm"<span class="tag">><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="tag">></form><span class="pln"><br/><span class="tag"></p></p><span class="pln"><br/><span class="tag"><p><p><em><b><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">多层嵌套1<span class="tag"></span></b></em></p></p><span class="pln"><br/><span class="tag"><p><p><span class="pln"> <span class="tag"><em><b></b></em><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">多层嵌套2<span class="tag"></span></p></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
登录后复制

以上是jquery之wrap(),wrap(),unwrap()方法详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板