If value in one div is higher than other

Question

I'm trying to hide a div if the value in one div is higher than an other. So far I have this:

<div class="limit">500</div>

<div class="leased">600</div>

<div id="next">next</div>

$("#next").toggle($(".leased").text() > $(".limit").text());

So in effect if the value in the

.leased

div is higher than the value in the

.limit

div the

#next

div is hidden.

Currently I'm just seeing all divs display. I've done quite a bit of Googling, but no joy. It's probably too basic!

Answer 1

Your code is close, you just need to convert the values you're comparing to integers using parseInt(). You also need to reverse the comparison to hide #next when the .leased value is higher. Try this:

$("#next").toggle(parseInt($(".leased").text(), 10) < parseInt($(".limit").text(), 10));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="limit">500</div>
<div class="leased">600</div>
<div id="next">next</div>