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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
简单实现js浮动框
Dec 13 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
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
ThinkPHP验证码使用简明教程
2014/03/05 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
Javascript中对象继承的实现小例
2014/05/12 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python反编译学习之字节码详解
2019/05/19 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python多任务之协程的使用详解
2019/08/26 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python远程linux执行命令实现
2020/11/11 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
火车的故事教学反思
2014/02/11 职场文书
工作过失检讨书
2014/02/23 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
Python测试框架pytest高阶用法全面详解
2022/06/01 Python