manipulate css on multiple spans with javascript

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?

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

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

    });
});

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 o开发者_开发知识库f every special span will be "Sale: " regardless of if it has a price or not. Thanks in advance

---

Your problem is that $(this) refers to all the .special elements. When doing an $.each, you should have two paramaters - one for the index and one for the current item. This will allow you to reference the single item.

$(".container > .special").each(function(i,item){
        var $item = item,
            specialContents = $item.text(),
            isEmpty = specialContents.substr(0, 7);

        if(isEmpty != "Sale: $"){
            $item.hide().attr('id', 'hidden');
        }

    });

Also, you're probably setting id for multiple elements to be hidden which isn't a good idea (ID should always be unique). You can also chain the hide() and attr() methods together to save a selector. I also just set up $item to save another jQuery selector.

If you're looking to change the CSS, then instead of $item.hide() you can use the css() method to do something like:

$item.css('text-decoration','none');

If, for example, you wanted to change the sibling span with the list class, you can do this:

$item.siblings('.list').css('text-decoration','none');

---

Given this HTML

<div class="container">
    <span class="list">List Price: $xx.xx</span>
    <span class="special">Sale: $xx.xx</span></div>
<div class="container">
    <span class="list">List Price: $xx.xx</span>
    <span class="special">Empty</span>
</div>
<div class="container">
    <span class="list">List Price: $xx.xx</span>
    <span class="special">Sale: $xx.xx</span>
</div>

your code should work. Here with removal of the line-through:

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

    if (isEmpty != "Sale: $") {
        $(this).hide();
        $(this).prev().css('text-decoration', 'none');
    }
});

Of course if your HTML is different from that, than it won't work.