jQuery 替换“小型大写字母"- 内容在 <h3> 之间复制 HTML标签 [英] jQuery replacing "small-caps" - Content is Duplicating HTML between <h3> tags

问题描述

我发现了 jQuery 的这个热点，它实际上允许您复制字体变体:小型大写字母".通常不是问题，但我正在使用 @font-face 并且我几乎不知道它在 Chrome、Safari、IE 中与 font-variant-small-caps 配合得不好.长话短说，该代码正在运行 SWEET 但它有一个缺点 - 由于某种原因，它正在搜索被括号括起来的第一个文本字符串，然后该文本字符串在稍后重复

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 替换“小型大写字母"- 内容在 <h3> 之间复制 HTML标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！