manipulate css on multiple spans with javascript
<p>I am trying to manipulate spans based on what is contained in them. on my company's ecommerce site there are two spans that contain the price of an item and the sale price of an item. not all items have sale prices. problem is the original price span is shown with the text-decoration set to line-though regardless of whether or not there is a sale price. since i can't interact with the database that contains product info (platform won't allow it) i have to use javascript to correct this. I need to hide the span that contains the sale price if no sale price is present and remove the text-decoration on the other span that contains the original price. currently the code (below) i have will hide the sale span, but i can only get it to remove the text-decoration on all or none of the list price spans. Any ideas?</p>

<pre><code>$(function(){
    $(".container &gt; .special").each(function(){
        var specialContents = $(this).text();
        var isEmpty = specialContents.substr(0, 7);

        if(isEmpty != "Sale: $"){
            $(this).hide();
        }

    });
});
</code></pre>

<p>
</p>

<p>each set of spans is wrapped in a div with class container and the spans have the classes 'list' for the original or list price and 'special' for the sale price, Also, the first 6 characters of every special span will be "Sale: " regardless of if it has a price or not.
Thanks in advance</p>
