Question

This is the example – but the problem is that it stops at the product which does not have sale price, say “I Love London Mini Frame Purse” for $135. It will continue to find class item but will stop at the product which has only one actual price (no sale price). Why is that? Can’t it continue finding class item and calculate accordingly till the end of the page ignoring the products with actual price only?

function calculate(sale, original) {

    percentDiscount = Math.round(eval((sale / original) * 100));

    return percentDiscount;
}

$(document).ready(function() {

    var salecost;
    var originalcost;
    var percent;
    $('.item').each(function() {
        salecost = $(this).find('.saleprice').html();
        salecost = salecost.replace(/[^\d\.]/g, "");


        originalcost = $(this).find('.actualprice').html();
        originalcost = originalcost.replace(/[^\d\.]/g, "");
        percentDiscount = calculate(salecost, originalcost);
        if (percentDiscount > 30) {

            $(this).find("#percentoff").html((percentDiscount) + '%');
            $(this).find("#percentoff").addClass('badge30');
        }

        if (percentDiscount > 50) {

            $(this).find("#percentoff").html((percentDiscount) + '%');
            $(this).find("#percentoff").addClass('badge50');
        }

        if (percentDiscount > 70) {

            $(this).find("#percentoff").html((percentDiscount) + '%');
            $(this).find("#percentoff").addClass('badge70');
        }
    });
});

Edit
One question
if 0 and 30 = green color
if 30 and 50 = brown color
if 50 and 70 = yellow color
if 70 and 100 = red color

would it be this:

 if (50> percentDiscount > 70) {

                    $(this).find("#percentoff").html((percentDiscount) + '%');
                    $(this).find("#percentoff").addClass('badge70');
                }

EDIT II
ANother question:

how to have price in html to be appended to div percentoff?

$(this).find("#percentoff").append.html((percentDiscount) + '%');

Answer 1

That is strange that it stops midway through the page, but perhaps you could just use an if statement?

i.e., change

salecost = $(this).find('.saleprice').html()

to

if (salecost = $(this).find('.saleprice').html()) {

(with a closing bracket, of course)