jQuery替换了"small-caps" -内容正在< h3>之间复制HTML.标签 [英] jQuery replacing "small-caps" - Content is Duplicating HTML between <h3> tags
问题描述
我发现jQuery的这一HOT位实际上使您能够复制"font-variant:small caps".通常,这不是问题,但我使用的是@ font-face,我几乎不知道它在Chrome,Safari,IE中与font-variant-small-caps不能很好地配合使用.长话短说,该代码可以正常运行,但是它有一个缺点-出于某种原因,它正在搜索括号中的第一个文本字符串,然后在稍后重复该文本字符串
I found this HOT bit of jQuery that actually allows you to replicate "font-variant: small caps". Normally not an issue, but I'm using @font-face and little did I know that it doesn't play nicely with font-variant-small-caps in Chrome, Safari, IE. Long story short, the code is working SWEET but it has one drawback - for some reason it is searching for the first text string that is bracketed by and then that text string is repeated in later
示例...代码说:
<h3 class="small caps">I'm the FIRST heading</h3>
<h3 class="small caps">I'm SECOND</h3>
由脚本更改以产生此结果:
is altered by the script to produce this:
<h3 class="small caps">I'm the FIRST heading</h3>
<h3 class="small caps">I'm the FIRST heading</h3>
这是在jQuery中发挥作用的代码:
Here's the code that's doing the magic in jQuery:
jQuery(document).ready(function($) {
var text = $('h3.small-caps').html();
$('h3.small-caps').html(text.replace(/\b([A-Za-z0-9])/g,'<span class="caps">$1</span>'));
$('.caps').css('font-size',50);
});
推荐答案
尝试:
jQuery(document).ready(function($) {
$('h3.small-caps').each(function() {
var $this = $(this);
var text = $this.html();
$this.html(text.replace(/\b([A-Za-z0-9])/g,'<span class="caps">$1</span>'));
});
$('.caps').css('font-size',50);
});
这篇关于jQuery替换了"small-caps" -内容正在< h3>之间复制HTML.标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!