Jquery - Using each with variables and an IF statement

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

To get values from elements, you need to use the $.val() method (assuming it's an input element).

var price = $(".element").val();

So price would be 5 assuming the following HTML:

<input type="text" value="5" class="element" />

You could simplify your fee-finding logic by using a ternary operator too:

var fee = ($(".element").val() > 1) ? 250 : 0 ;

So if the value of our input (having the classname 'element') is greater than 1, fee will be 250. Else, fee will be the value of our input (having the id 'price').