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实现异步刷新的代码(转载)
Mar 29 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
Vue DevTools调试工具的使用
Dec 05 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
详解使用React制作一个模态框
Mar 14 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
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
python optparse模块使用实例
2015/04/09 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python 实时遍历日志文件
2016/04/12 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
PyQt5实现简单的计算器
2020/05/30 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
运动会入场词60字
2014/02/15 职场文书
实验室的标语
2014/06/20 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
写给导师的自荐信
2015/03/06 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript