How to create a 'for loop' for a variable to run 'if' statements on specific divs

Question

I need to create a piece of script that looks through a variety of products on a page, works out the percentage off using the 'was' and 'now' prices and then display an image for that product that represents the percentage off.

So far I can loop through all the products and run the percentage script to display an image but the same image is shown on all products instead of different images for different percentages. Does anyone know how I can make the percentage script run for each product and not duplicate?

Here's some dummy HTML:

<div id="prods">
<div id="discountWasPrice" style="display:none;">50</div>
<div id="discountSellPrice" style="display:none;">25</div>
<div id="discount50"></div>
</div>

<div id="prods">
<div id="discountWasPrice" style="display:none;">75</div>
<div id="discountSellPrice" style="display:none;">25</div>
<div id="discount50"></div>
</div>

<div id="prods">
<div id="discountWasPrice" style="display:none;">10</div>
<div id="discountSellPrice" style="display:none;">8</div>
<div id="discount50"></div>
</div>

And here's the javascript so far:

<script type="text/javascript">
var discount = $("div#discount50");
var prods = $("div#prods");
var discountLen = $("div#prods").length;
for(var i = 0; i < discountLen; i++){
var x = $('#discountWasPrice').text();
var f = $('#discountSellPrice').text();
var g = 1-(f/x);
percent= (g * 100).toFixed(2);
if ((percent > 4.00) && (percent < 10.00)) {
    discount[i].innerHTML+="<a href=\"\"><img src=\"5percent.png\"></a>";}
if ((percent > 9.00) && (percent < 15.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"10percent.png\"></a>";}
if ((percent > 14.00) && (percent < 20.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"15percent.png\"></a>";}
if ((percent > 19.00) && (percent < 25.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"20percent.png\"></a>";}
if ((percent > 24.00) && (percent < 30.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"25percent.png\"></a>";}
if ((percent > 29.00) && (percent < 35.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"30percent.png\"></a>";}
if ((percent > 34.00) && (percent < 40.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"35percent.png\"></a>";}
if ((percent > 39.00) && (percent < 45.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"40percent.png\"></a>";}
if ((percent > 44.00) && (percent < 50.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"45percent.png\"></a>";}
if ((percent > 49.00) && (percent < 60.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"50percent.png\"></a>";}
if ((percent > 59.00) && (percent < 70.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"60percent.png\"></a>";}
if ((percent > 69.00) && (percent < 75.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"70percent.png\"></a>";}
if (percent > 74.00) {
discount[i].innerHTML+="<a href=\"\"><img src=\"70percentplus.png\"></a>";}
}
</script>

Any help is much appreciated,

Thanks

We are not debuggers. http://meta.stackexchange.com/a/135066/173320 — gdoron, Jun 21 '12 at 13:57
anyways you have used same id for all the divs and u are using id selector which might be the cause of problem — Ajay Beniwal, Jun 21 '12 at 13:58
@Ajaybeni. I knew it, this issue with the `id`s again... [Read this please](http://stackoverflow.com/a/11114634/601179). — gdoron, Jun 21 '12 at 14:00
@gdoron: That link, it's gone! I've not seen objections to this type of question in the past, has something changed? I'm pretty sure there have been many "please tell my why this is not working" type questions. I've never really seen any issue. — Lee Kowalkowski, Jun 28 '12 at 15:45
@casperOne: This *is* a real question, it has an accepted answer. http://stackoverflow.com/faq#dontask does not include questions like this, in fact it falls under criteria for "specific programming problem" in http://stackoverflow.com/faq#questions. Is there some badge to be earned from closing questions or something? Did you close the wrong question? — Lee Kowalkowski, Jun 28 '12 at 15:51
@LeeKowalkowski See gdoron first comment, we are not debuggers. JoProte simply dumped a bunch of code he already had and said "fix my bug". That does not constitute a valid question on Stack Overflow. — casperOne, Jun 28 '12 at 16:23
@casperOne: I think you've been a touch impatient to be frank, because the question is not quite how you have summarised, and yes "fix my bug" *does* constitute a valid question, it just depends how you ask it. I have seen gdoron's first comment, see my comment in response to that! — Lee Kowalkowski, Jun 28 '12 at 18:59

score 1 · Accepted Answer · answered Jun 21 '12 at 14:03

1

Move your "id" to "class" for every div, then get some jquery magic to loop on all your divs...

answered Jun 21 '12 at 14:03

napolux

15,574
9
51
70

Thanks, would you recommend .each() or is there a better bit of jquery magic? – JoProte Jun 21 '12 at 14:19
Well, jQuery each is not so performant, but it's ok :) – napolux Jun 21 '12 at 14:20
Do you know a better way, .each() just seems to be returning all values of x next to each other instead of one at a time? – JoProte Jun 21 '12 at 14:23
Get all your values, put them in an array and then use them at your glance :) – napolux Jun 28 '12 at 09:31
1

I ended up creating two .each() loops within the parent div which seemed to do the trick: $('.discount50').each(function(containerIndex) { //console.log($(this)); var x = '' $(this).find('.discountWasPrice').each(function(itemx) { //console.log($(this).text()); x = $(this).text();}) var f = '' $(this).find('.discountSellPrice').each(function(itemf) { //console.log($(this).text()); f = $(this).text();}) – JoProte Jun 28 '12 at 13:51

How to create a 'for loop' for a variable to run 'if' statements on specific divs

1 Answers1