使用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 相关文章推荐
javascript 日期常用的方法
Nov 11 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
详解React服务端渲染从入门到精通
Mar 28 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 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转义Json里的特殊字符的函数
2015/06/08 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
Nginx实现反向代理
2017/09/20 Servers
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
JS判断一个数是否是水仙花数
2017/06/11 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python之拟合的实现
2019/07/19 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
30年同学聚会邀请函
2014/01/25 职场文书
高中打架检讨书
2014/02/13 职场文书
房产继承公证书
2014/04/09 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
优秀班集体申报材料
2014/12/25 职场文书
担保书格式
2015/01/20 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
党员转正党支部意见
2015/06/02 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python