Jquery - Using each with variables and an IF statement

0 votes

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

Jun 21, 2022 in JQuery by gaurav
• 23,260 points
3,303 views

1 answer to this question.

0 votes

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').

answered Jun 21, 2022 by rajatha
• 7,680 points

Related Questions In JQuery

0 votes
1 answer

How to move an item programmatically with jQuery sortable while still triggering events?

Hello, $("selector").trigger("sortupdate"); you will have to  pass as second argument  ...READ MORE

answered May 29, 2020 in JQuery by Niroj
• 82,880 points
4,191 views
0 votes
1 answer

How can I select an element with multiple classes in jQuery?

Hello @kartik, If you want to match only ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
3,410 views
0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
4,216 views
0 votes
1 answer

How do I check if the mouse is over an element in jQuery?

Hello @kartik, Use this code: $("someelement").mouseenter(function(){ ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
• 82,880 points
2,328 views
0 votes
1 answer

jquery $.each() for objects

The $.each() works for objects and arrays ...READ MORE

answered Feb 16, 2022 in Java by Aditya
• 7,680 points
503 views
0 votes
1 answer

jquery $.each() for objects

each(), which is used to iterate, exclusively, over ...READ MORE

answered Jun 6, 2022 in JQuery by Edureka
• 13,690 points
497 views
0 votes
1 answer

jQuery if checkbox is checked

for jQuery  if ($('input.checkbox_check').prop('checked')) { ...READ MORE

answered Jun 20, 2022 in JQuery by rajatha
• 7,680 points
481 views
0 votes
0 answers

jQuery: Test if checkbox is NOT checked

I'm having trouble figuring this out. I ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
713 views
0 votes
1 answer

Show/hide content with specific class using jquery

jQuery hide() Method The hide() method hides the ...READ MORE

answered Jun 13, 2022 in JQuery by rajatha
• 7,680 points
2,661 views
0 votes
1 answer

How to shorten repeating code with html function and return tags in jquery

Firstly note that replace() only accepts two arguments, the ...READ MORE

answered Jun 15, 2022 in JQuery by rajatha
• 7,680 points
880 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP