Scraping float values for multiple classes of the same name

Question

I'm trying apply the same mathematical changes to 6 different number in 6 difference spans that all share the same class. With this HTML:

<span class="PageText_L483n">$8.00</span>
<span class="PageText_L483n">$9.00</span>
<span class="PageText_L483n">$10.00</span>
<span class="PageText_L483n">$11.00</span>
<span class="PageText_L483n">$12.00</span>
<span class="PageText_L483n">$13.00</span>

I originally had this JS:

$(function() {
       var price = parseFloat($('.PageText_L483n').text().substr(1));
       var discount = price * 0.2;
       var newPrice = price - discount;
       var newText = '<div>$' + price + '</div> $' + newPrice;
       $('.PageText_L483n').html(newText);
       $('.PageText_L483n div').css("text-decoration", "line-through");

});

But this would simply replace all the spans with the information from the first span. So then I tried to use arrays with this JS:

$(function() {

       var prices = [];
       for (var i = 0; i < 6; i++) {
           prices[i] = parseFloat($('.PageText_L483n:nth-of-type(i+1)').text().trim().substr(1));
       }
       for (var j = 0; j < 6; j++) {
            var discount = prices[j] * 0.2;
            var newPrice = prices[j] - discount;
            var newText = '<div>$' + prices[j] + '</div> $' + newPrice;
            $('.PageText_L483n').html(newText);
            $('.PageText_L483n div').css("text-decoration", "line-through");
       }

});

But now it doesn't do anything. Could someone point me in the right direction?

JSFiddle: http://jsfiddle.net/vSePd/

Answer 1

Fiddle

Since you're using jQuery, you can easily loop through the elements themselves:

$(function() {

    $('span.PageText_L483n').each(function() {
        var span = $(this);
        var price = parseFloat(span.text().substring(1));
        var discount = price * 0.2;
        var newPrice = price - discount;
        span.html('<div style=text-decoration:line-through>$' + price.toFixed(2) + '</div> $' + newPrice.toFixed(2));
    });

});

If you don't want to use jQuery for whatever reason:

$(function() {
    var spans = document.querySelectorAll('span.PageText_L483n');

    for ( var i = 0, l = spans.length; i < l; ++i ) {
        var price =  parseFloat(spans[i].textContent.substring(1));
        var discount = price * 0.2;
        var newPrice = price - discount;
        spans[i].innerHTML = '<div style=text-decoration:line-through>$' + price.toFixed(2) + '</div> $' + newPrice.toFixed(2);
    }
});

Answer 2

As kalley has illustrated, jQuery's .each() would be a suitable function to use when performing an action on a set of elements that match a selector.

The reason why $('.PageText_L483n') breaks your code is that it always selects all of your span s. So when using $('.PageText_L483n').html(newText) , for example, the html() function will be applied to all elements that match the selector.

When using each() , you get access to $(this) , which basically points to the one single element of all the matched elements that the function is currently looping through, and this allows you to perform a separate action during each run.

Answer 3

$(jquery).each();

Look at this: http://jsfiddle.net/vSePd/3/

Is that what you mean?