使用jQuery中的wrap()函数操作HTML元素的教程


Posted in Javascript onMay 24, 2016

wrap()函数用于在每个匹配元素外部包裹指定的HTML结构。
与该函数相对的是unwrap()函数,用于当前匹配元素的父元素(只移除父元素,其内部节点全部保留)。
该函数属于jQuery对象(实例)。

语法

jQueryObject.wrap( wrapper )

参数
wrapper String/Element/jQuery/Function类型用于包裹匹配元素的节点。
如果参数wrapper为字符串,则将其视作jQuery选择器或html字符串,jQuery会自行判断。
jQuery 1.4 新增支持:参数wrapper可以为函数。wrap()将根据匹配的所有元素遍历执行该函数,函数中的this将指向对应的DOM元素。
wrap()还会为函数传入一个参数,即当前元素在匹配元素中的索引。函数的返回值就是用于包裹的节点内容(可以是html字符串、DOM元素或jQuery对象)。
注意:如果wrapper匹配多个元素,则只将第一个元素作为包裹元素。
注意:如果wrapper是多层嵌套的元素(例如<p><i></i></p>),wrap()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是Element节点(比如文本节点、注释节点等),就停止向内查找,直接在当前节点内部的末尾位置追加(append())当前匹配元素。

返回值
wrap()函数的返回值为jQuery类型,返回当前jQuery对象本身(以便于进行链式风格的编程)。
注意:即使wrapper元素是当前页面中的元素,该元素也不会从原位置上消失。因为wrap()使用的是该元素的副本(克隆)来充当包裹。

示例

<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
</div>
$( ".inner" ).wrap(function() {
 return "<div class='" + $( this ).text() + "'></div>";
});

结果如下:

<div class="container">
 <div class="Hello">
  <div class="inner">Hello</div>
 </div>
 <div class="Goodbye">
  <div class="inner">Goodbye</div>
 </div>
</div>

类似的用法还有.wrapAll()、.wrapInner()、.unwrap()等等!

Javascript 相关文章推荐
jquery一句话全选/取消全选
Mar 01 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
简单的三步vuex入门
May 20 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
实例解析jQuery中proxy()函数的用法
May 24 #Javascript
jQuery前端开发35个小技巧
May 24 #Javascript
JS+Canvas绘制时钟效果
Aug 20 #Javascript
基于JQuery实现图片上传预览与删除操作
May 24 #Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 #Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 #Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 #Javascript
You might like
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
霸王洗发水广告词
2014/03/14 职场文书
升职演讲稿范文
2014/05/23 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
见习报告的格式
2014/11/04 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
《将心比心》教学反思
2016/02/23 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
导游词之无锡唐城
2019/12/12 职场文书
Python合并pdf文件的工具
2021/07/01 Python
Nginx反向代理、重定向
2022/04/13 Servers
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android