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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
大家未必知道的Js技巧收藏
Apr 07 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
浅谈javascript错误处理
Aug 11 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php学习之function的用法
2012/07/14 PHP
php程序内部post数据的方法
2015/03/31 PHP
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
python web基础之加载静态文件实例
2018/03/20 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
客户代表自我评价范例
2013/09/24 职场文书
年终考核评语
2014/01/19 职场文书
年度考核自我评价
2014/01/25 职场文书
公司委托书格式范文
2014/04/04 职场文书
室内趣味活动方案
2014/08/24 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
小学生学习保证书
2015/02/26 职场文书
装修公司管理制度
2015/08/05 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python