jQuery标签替换函数replaceWith()的使用例子


Posted in Javascript onAugust 28, 2014

replaceWith简单使用

jQuery中,有一个强大的替换函数replaceWith(),使用非常简单,如:

页面有如下p标签

jQuery标签替换函数replaceWith()的使用例子

把所有p标签替换为“##”

$('p').replaceWith('##');

执行后的结果:

 jQuery标签替换函数replaceWith()的使用例子

替换标签

利用这个replaceWith,我们可以把所有p标签替换为b标签,内容不变:

$('p').each(function(){
    $(this).replaceWith('<b>'+$(this).html()+'</b>');
});

结果

jQuery标签替换函数replaceWith()的使用例子

这就替换了!

多语言网站可以利用这个函数轻松完成

如果你开发的是一个多语言的网站,甚至可以利用这个特性,比如,在你需要翻译的文字上加上i标签,然后遍历翻译替换。

假如页面dom结构如下:

jQuery标签替换函数replaceWith()的使用例子

我们要把页面中的i标签里的文本给翻译,页面中有i标签的分别是苹果、电脑。于是我们实现需要一个翻译库:

var translate = {
    '苹果' : 'apple',
    '电脑' : 'PC'
};

然后我可以这样执行翻译替换

$('i').each(function(){
    $(this).replaceWith(translate[$(this).html()]);
});

执行后效果:

jQuery标签替换函数replaceWith()的使用例子

页面效果:

jQuery标签替换函数replaceWith()的使用例子

Javascript 相关文章推荐
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 #Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 #Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 #Javascript
JavaScript实现的in_array函数
Aug 27 #Javascript
JavaScript AJAX之惰性载入函数
Aug 27 #Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 #Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 #Javascript
You might like
基于mysql的bbs设计(五)
2006/10/09 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
Python正则表达式介绍
2012/08/06 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
小学生自我评价范文
2014/01/25 职场文书
小学科学教学反思
2014/01/26 职场文书
万年牢教学反思
2014/02/15 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
音乐学专业求职信
2014/07/22 职场文书
施工单位安全责任书
2014/07/24 职场文书
通知格式
2015/04/27 职场文书
工程主管竞聘书
2015/09/15 职场文书
您对思维方式了解多少?
2019/12/09 职场文书