jQuery заменяет «маленькие заглавные буквы» - контент дублирует HTML между тегами <h3> - PullRequest
Новая
       4

jQuery заменяет «маленькие заглавные буквы» - контент дублирует HTML между тегами <h3>

1 голос
/ 05 декабря 2010

Я нашел этот ГОРЯЧИЙ бит jQuery, который на самом деле позволяет копировать «font-option: small caps». Обычно это не проблема, но я использую @ font-face и мало что знал, что он не очень хорошо работает с font-вариантами-маленькими заглавными буквами в Chrome, Safari, IE. Короче говоря, код работает SWEET, но у него есть один недостаток - по какой-то причине он ищет первую текстовую строку, заключенную в квадратные скобки, а затем эту текстовую строку повторяется позже

пример ... код говорит: 

<h3 class="small caps">I'm the FIRST heading</h3>
<h3 class="small caps">I'm SECOND</h3>

изменяется скриптом для получения этого: 

<h3 class="small caps">I'm the FIRST heading</h3>
<h3 class="small caps">I'm the FIRST heading</h3>

Вот код, который творит чудеса в 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);
    });

1 Ответ

3 голосов
/ 05 декабря 2010

Попробуйте: 

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);
});
...