Question

Spent a good few hours on this now and don’t seem to be getting anywhere!

I have 5 related products at the bottom of the page. Currently there is a “was” price showing on these products regardless of if they are discounted. Located above is the actual price, obviously if the product isn’t discounted the prices appear will the same, which is not cool.

So I’ve written a script that checks if the “actual” price is the same as the “was” price, if true it simply removes the “was” Div element. Works fine.

Now the issue I have is making this rule work for multiple elements with he same class in a page. For some reason when I try to pass a variable within an “.each” function, it returns a string which contains all of the Div values for every “.each” element, as oppose to just returning the value for its relative parent element. e.g. “£674£1999.99£674” rather than “£674”.

Checks to see if actual price is the same as was price:

    $('.floatleft').each(function() {
    var wasprice = $('.was').text();
    var ourprice = $('.now').text();

    if (wasprice == ourprice) {

    $('div.price-extras').remove();
    $('.productdetails-view .product-price .PricesalesPrice').css('line-height','40px');

};
});

Sample of the HTML code:

<div class="vmproduct-featured">
  <div class=" width20 floatleft">
    <div class="spacer">
      <a href="/store/powertools/tacx-i-magic-t1900-trainer-info" title="Tacx I-Magic T1900 Trainer" class="img-link">
        <img src="/store/product/resized/123_150x150.jpg" alt="123" class="featuredProductImage" border="0">
      </a>
      <div class="clear"></div>     
      <a class="text-link" href="/store/powertools/tacx-i-magic-t1900-trainer-info">Tacx I-Magic T1900 Trainer</a>      
      <div class="clear"></div>
      <div class="was">£674.00</div>
      <div class="now">£674.00</div> 
    </div>
  </div>
  <div class=" width20 floatleft">
    <div class="spacer">
      <a href="/store/powertools/2012-cube-agree-gtc-di2-info" title="2012 Cube Agree GTC DI2" class="img-link">
        <img src="/store/product/resized/12cubeagreegtcdi2_150x150.jpg" alt="12cubeagreegtcdi2" class="featuredProductImage" border="0">
      </a>
      <div class="clear"></div>     
      <a class="text-link" href="/store/powertools/2012-cube-agree-gtc-di2-info">2012 Cube Agree GTC DI2
      </a>      
      <div class="clear"></div>
      <div class="was">£1,999.99</div>
      <div class="now">£2,499.99</div> 
    </div>
  </div>
 </div>

So basically I’m failing at the .each() and need some assistance, please <3

Answer 1

that’s because $('.was').text(); selects all the texts of the was class at once, try this:

$('.was').each(function() {
    var wasprice = $(this).text();
    var ourprice = $(this).siblings('.now').text(); // or "$(this).next('.now').text();"

    if (wasprice == ourprice) { 
        $('div.price-extras').remove();
        $('.productdetails-view .product-price .PricesalesPrice').css('line-height','40px');
    }
});