使用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 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
vue模块拖拽实现示例代码
Mar 09 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
php获取淘宝分类id示例
2014/01/16 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
ArrayList类(增强版)
2007/04/04 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python中关于for循环的碎碎念
2017/06/30 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
化学专业自荐信
2014/05/28 职场文书
宣传普通话标语
2014/06/27 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
JS实现简单九宫格抽奖
2022/06/28 Javascript