JQuery заменить клонирование, мне нужно для каждого элемента

Question

Пытался добавить тег 'sup' к следующему. Это работает, однако это клонирование первой цены, которую он видит, какие-либо идеи, почему?

<font class="pricecolor colors_productprice specialprice">
  <span class="PageText_L483n">
     <font class="text colors_text"><b>Regular Price:</b></font>
     <span class="priceis strike">$2,533.31</span> </span>
</font>

<font class="pricecolor colors_productprice specialprice">
  <span class="PageText_L483n">
     <font class="text colors_text"><b>Regular Price:</b></font>
     <span class="priceis strike">$288.00</span> </span>
</font>

<font class="pricecolor colors_productprice specialprice">
  <span class="PageText_L483n">
     <font class="text colors_text"><b>Regular Price:</b></font>
     <span class="priceis strike">$1,055.00</span> </span>
</font>

$(document).ready(function(){
    $('font.pricecolor').html(
        $('.pricecolor').html().replace(/\.\d{1,2}/,
            function(a){
                return '<sup>' + a + '</sup>';
            })
    );
});

Answer 1

Это не работает, потому что для каждого элемента вы запрашиваете '.pricecolor' снова. Использование .html() для получения текущего HTML-кода всегда возвращает HTML-код первого элемента.

Вы должны сделать что-то вроде этого:

$('span.priceis').html(function (i, oldhtml) {
    return oldhtml.replace(/\.\d{1,2}/,
            function(a){
                return '<sup>' + a + '</sup>';
            });
});

jsFiddle Demo

Примечание: Не используйте тег font, он устарел. Вместо этого вы можете использовать простой span или любой семантически соответствующий элемент.

Answer 2

Я думаю, вы неправильно используете html() в качестве итератора.Попробуйте each() вместо этого.Кроме того, внутри ваших блоков вы хотите использовать this для ссылки на текущий элемент.Наконец небольшая оптимизация для вашего регулярного выражения.

$(document).ready(function() {
    $('font.pricecolor').each(function() {
        elem = $(this);
        elem.html(elem.html().replace(/(\.\d{1,2})/, '<sup>$1</sup>'));
    });
});

Посмотрите это в действии http://jsfiddle.net/teXCc/

Answer 3

Я думаю, здесь есть небольшое недоразумение. Селектор font.pricecolor выберет все теги шрифтов, которые вы ищете. Однако, когда вы используете .html(value) для установки содержимого HTML, когда выбран список объектов, value рассчитывается только для первого элемента в списке, и это значение используется повторно для остальной части списка.

Вам необходимо использовать .each, чтобы создать новое значение для каждого элемента в списке. Попробуйте это ...

$(document).ready(function()
{
    $('font.pricecolor').each(function(i)
    {
        var $this = $(this);
        $this.html($this.html().replace(/\.\d{1,2}/,
            function(a)
            {
                return '<sup>' + a + '</sup>';
            }));
    });
});

Answer 4

Возможно, это рефакторинг, но проблема решена:

$(document).ready(function(){

    $('font.pricecolor').each(function() {
        $(this).html(
            $(this).html().replace(/\.\d{1,2}/,
                function(a){
                    return '<sup>' + a + '</sup>';
                })
        );
    });

});

Вам нужно указать this, а не класс снова в вашей вложенной функции.