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 相关文章推荐
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
vue制作抓娃娃机的示例代码
Apr 17 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
JS实现简单九宫格抽奖
Jun 28 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中for循环语句的几种变型
2007/03/16 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
基于python requests库中的代理实例讲解
2018/05/07 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
Python实现快速排序的方法详解
2019/10/25 Python
python实现按首字母分类查找功能
2019/10/31 Python
python使用建议与技巧分享(二)
2020/08/17 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
思想政治教育专业个人求职信范文
2013/12/20 职场文书
工作自我评价范文
2015/03/05 职场文书
服装店员工管理制度
2015/08/07 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
深入理解redis中multi与pipeline
2021/06/02 Redis
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang