replaceWith简单使用EfFHTML5中文学习网 - HTML5先行者学习网
jQuery中,有一个强大的替换函数replaceWith(),使用非常简单,如:EfFHTML5中文学习网 - HTML5先行者学习网
页面有如下p标签EfFHTML5中文学习网 - HTML5先行者学习网
EfFHTML5中文学习网 - HTML5先行者学习网
把所有p标签替换为“##”EfFHTML5中文学习网 - HTML5先行者学习网
$('p').replaceWith('##');
执行后的结果:EfFHTML5中文学习网 - HTML5先行者学习网
EfFHTML5中文学习网 - HTML5先行者学习网
替换标签EfFHTML5中文学习网 - HTML5先行者学习网
利用这个replaceWith,我们可以把所有p标签替换为b标签,内容不变:EfFHTML5中文学习网 - HTML5先行者学习网
$('p').each(function(){ $(this).replaceWith('<b>'+$(this).html()+'</b>');});
结果EfFHTML5中文学习网 - HTML5先行者学习网
EfFHTML5中文学习网 - HTML5先行者学习网
这就替换了!EfFHTML5中文学习网 - HTML5先行者学习网
多语言网站可以利用这个函数轻松完成EfFHTML5中文学习网 - HTML5先行者学习网
如果你开发的是一个多语言的网站,甚至可以利用这个特性,比如,在你需要翻译的文字上加上i标签,然后遍历翻译替换。EfFHTML5中文学习网 - HTML5先行者学习网
假如页面dom结构如下:EfFHTML5中文学习网 - HTML5先行者学习网
EfFHTML5中文学习网 - HTML5先行者学习网
我们要把页面中的i标签里的文本给翻译,页面中有i标签的分别是苹果、电脑。于是我们实现需要一个翻译库:EfFHTML5中文学习网 - HTML5先行者学习网
var translate = { '苹果' : 'apple', '电脑' : 'PC'};
然后我可以这样执行翻译替换EfFHTML5中文学习网 - HTML5先行者学习网
$('i').each(function(){ $(this).replaceWith(translate[$(this).html()]);});
执行后效果:EfFHTML5中文学习网 - HTML5先行者学习网
EfFHTML5中文学习网 - HTML5先行者学习网
页面效果:EfFHTML5中文学习网 - HTML5先行者学习网
EfFHTML5中文学习网 - HTML5先行者学习网