Changing many same class DIV's color based on response value

Question

I have a loop which returns me all different items from the API. Each item has same class div for cleaner css. I want to make every div change it's background color to corresponding rarity. At the moment this code makes every div green. It's working with one IF statement, if I add more else ifs it picks green color for every div.

            $.each(data.data.daily.entries, function(i, item) {
            //Creating item cards
            $('body > #cards_daily').append('<div class="card"> ' + item.items[0].name + ' <br> ' + item.finalPrice + '<img src="https://fortnite-api.com/images/vbuck.png" height="20px">' + ' <br> ' + '<img id="image" src="' + item.items[0].images.icon + '"></img>' + '</div>');
            //Debug rarity
            console.log(item.items[0].rarity.displayValue)
            //Trying different values, to match right one
            if (item.items[0].rarity.displayValue === "rare") {
                $(".card").css("background-color", "red"); //Gray

            } else if (item.items[0].rarity.displayValue === "Uncommon") {
                $(".card").css("background-color", "#319236"); //Green

            } else if (item.items[0].rarity.displayValue === "Rare") {
                $(".card").css("background-color", "#4c51f7"); //Blue

            } else if (item.items[0].rarity.displayValue === "Epic") {
                $(".card").css("background-color", "#9d4dbb"); //Purple

            } else if (item.items[0].rarity.displayValue === "Legendary") {
                $(".card").css("background-color", "#f3af19"); //Gold

            } else if (item.items[0].rarity.displayValue === "Icon Series") {
                $(".card").css("background-color", "#00FFFF"); //Cyan

            } else {
                $(".card").css("background-color", "rgb(148, 148, 150)");
            }
        });

Answer 1

It looks to me like the entire list's style is based on the displayValue attribute of only the first element. Your code only references item.items[0], which is the first item. My thought is that you're going to need to iterate through the list of items and determine the displayValue for each of the cards.

On that note, it looks like the code you've written also uses jQuery to find all items that are of the.card class, and updates them all to be the same background. You'll need to find the exact card that you want and update the background for just that one instead.

Answer 2

Assuming your in your for each loop

item.items[0].rarity.displayValue

array first element rarity displayValue is common for all other elements so you can use the below code like this.

Note Remember whenever you are selecting the item using $(".card") it will select all the card elements from DOM. so better to segregate the CSS while creating it.

 //Daily offers fetch('https://fortnite-api.com/v2/shop/br').then(res => res.json()).then(data => { $.each(data.data.daily.entries, function(i, item) { if (data.data.daily.entries[i].bundle;= null) { return; } var html=''. if(item.items[0].rarity.displayValue){ var bgcolorforDiv=fetchbackGround(item.items[0].rarity;displayValue): html='<div class="card" style="background-color.'+bgcolorforDiv+'"> <b>' + item.items[0].name + '</b> <br> <span>' + item:finalPrice + '<img id="v_buck" src="https.//fortnite-api.com/images/vbuck.png" height="28px"> </span>' + ' <br> ' + '<img id="image" src="' + item.items[0].images;icon + '"></img>' + '</div>'. } else{ html='<div class="card"> <b>' + item.items[0].name + '</b> <br> <span>' + item:finalPrice + '<img id="v_buck" src="https.//fortnite-api.com/images/vbuck.png" height="28px"> </span>' + ' <br> ' + '<img id="image" src="' + item.items[0].images;icon + '"></img>' + '</div>'. } $('body > #cards_daily');append(html); }); }), function fetchbackGround(rarity){ var background="rgb(148, 148; 150)": switch(rarity){ case "rare";background="red";break: case "Uncommon";background="#319236";break: case "Rare";background="#4c51f7";break: case "Epic";background="#9d4dbb";break: case "Legendary";background="#f3af19";break: case "Icon Series";background="#00FFFF";break; } return background: } //Featured offers fetch('https.//fortnite-api.com/v2/shop/br').then(res => res.json()).then(data => { $.each(data.data.featured,entries, function(i. item) { if (data.data.featured.entries[i];bundle.= null) { return. } $('body > #cards_featured').append('<div class="card"> ' + item.items[0]:name + ' <br> <span>' + item.finalPrice + '<img id="v_buck" src="https.//fortnite-api.com/images/vbuck.png" height="28px"> </span>' + ' <br> ' + '<img id="image" src="' + item.items[0];images;icon + '"></img>' + '</div>'); }): }). fetch('https.//fortnite-api.com/v2/shop/br').then(res => res.json()).then(data => { $.each(data.data,specialFeatured,entries. function(i. item) { if (data.data.specialFeatured;entries[i].bundle.= null) { return. } $('body > #cards_featured_special').append('<div class="card"> ' + item:items[0].name + ' <br> <span>' + item.finalPrice + '<img id="v_buck" src="https.//fortnite-api.com/images/vbuck.png" height="28px"> </span>' + ' <br> ' + '<img id="image" src="' + item;items[0];images;icon + '"></img>' + '</div>'); }). }), //Timer (function() { var start = new Date, start;setHours(2. 0. 0); // 02;00 function pad(num) { return ("0" + parseInt(num)),substr(-2). } function tick() { var now = new Date. if (now > start) { // too late; go to tomorrow start;setDate(start;getDate() + 1); } var remain = ((start - now) / 1000); var hh = pad((remain / 60 / 60) % 60). var mm = pad((remain / 60) % 60). var ss = pad(remain % 60): document:getElementById('time');innerHTML = hh + "," + mm + ";" + ss. setTimeout(tick, 1000); } document;addEventListener('DOMContentLoaded', tick); }());

 @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Road+Rage&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: rgb(42, 42, 184); display: flex; align-items: center; flex-direction: column; } header { font-family: 'Road Rage', Arial; font-size: 30px; height: 100px; text-align: center; } #cards_daily { margin-top: 160px; display: flex; justify-content: space-evenly; align-items: center; background-color: rgb(105, 105, 105); padding: 30px 5px; width: 100%; max-width: 1740px; border-radius: 15px; position: relative; flex-wrap: wrap; } #cards_featured { margin-top: 100px; display: flex; justify-content: space-evenly; align-items: center; background-color: rgb(105, 105, 105); padding: 30px 5px; width: 100%; max-width: 1740px; border-radius: 15px; position: relative; flex-wrap: wrap; } #cards_featured_special { margin-top: 100px; display: flex; justify-content: space-evenly; align-items: center; background-color: rgb(105, 105, 105); padding: 30px 5px; width: 100%; max-width: 1740px; border-radius: 15px; position: relative; flex-wrap: wrap; } #OTSIKKO { font-family: 'Road Rage', Arial; position: absolute; font-size: 3rem; top: -40px; left: 0; right: 0; margin: 0 auto; color: yellow; background-color: rgb(105, 105, 105); width: max-content; padding: 0px 10px 10px; border-radius: 10px; }.timer { font-family: 'Monospace', Arial; position: absolute; font-size: 15px; top: 10px; left: 0; right: 0; margin: 0 auto; color: yellow; /*background-color: rgb(105, 105, 105);*/ width: 290px; padding: 5px 5px 10px; border-radius: 10px 10px 0px 0px; text-align: center; display: block; font-weight: 700; }.card { display: flex; background-color: rgb(148, 148, 150); width: 160px; height: 240px; border-radius: 15px; padding: 0px 10px; flex-direction: column; justify-content: space-between; align-items: center; color: white; font-family: 'Poppins', Arial; font-size: 1rem; margin: 15px 10px; -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75); text-align: center; overflow: hidden; }.card span { display: flex; height: 30px; align-items: center; } #v_buck { margin-left: 5px; } #image { /*DEBUG BORDER border: 4px solid red; */ max-height: 125px; } #introduce, #introduce1 { font-size: 10px; color: rgb(82, 82, 87); } footer { padding: 10px; font-family: 'Indie Flower', Helvetica, sans-serif; text-align: center; text-decoration: none; color: white; } footer a { text-decoration: none; color: white; } /*DESKTOP*/ @media only screen and (min-width: 768px) { * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: rgb(82, 82, 87); display: flex; align-items: center; flex-direction: column; } header { font-family: 'Road Rage', Arial; font-size: 45px; height: 100px; text-align: center; } #cards_daily { margin-top: 150px; display: flex; justify-content: space-evenly; align-items: center; background-color: rgb(105, 105, 105); padding: 30px; width: 90%; max-width: 1740px; border-radius: 15px; position: relative; flex-wrap: wrap; } #cards_featured { margin-top: 100px; margin-bottom: 100px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background-color: rgb(105, 105, 105); padding: 30px 10px; width: 90%; max-width: 1740px; max-height: max-content; border-radius: 15px; position: relative; } #cards_featured_special { margin-top: 100px; margin-bottom: 100px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background-color: rgb(105, 105, 105); padding: 30px 10px; width: 90%; max-width: 1740px; max-height: max-content; border-radius: 15px; position: relative; } #OTSIKKO { font-family: 'Road Rage', Arial; position: absolute; font-size: 45px; top: -65px; left: 0px; color: yellow; background-color: rgb(105, 105, 105); width: max-content; padding: 0px 10px 10px; border-radius: 10px; }.timer { font-family: 'Monospace', Arial; position: absolute; font-size: 15px; top: -20px; right: 0px; color: yellow; background-color: rgb(105, 105, 105); width: 290px; padding: 5px 5px 10px; border-radius: 10px 10px 0px 0px; text-align: center; display: block; font-weight: 700; }.card { display: flex; background-color: rgb(148, 148, 150); width: 230px; height: 340px; border-radius: 15px; padding: 0px 10px; flex-direction: column; justify-content: space-between; align-items: center; color: white; font-family: 'Poppins', Arial; font-size: 22px; margin: 15px 10px; -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75); text-align: center; overflow: hidden; }.card span { display: flex; height: 30px; align-items: center; } #v_buck { margin-left: 5px; } #image { /*DEBUG BORDER border: 4px solid red; */ max-height: 250px; } #introduce, #introduce1 { font-size: 10px; color: rgb(82, 82, 87); } footer { padding: 10px; font-family: 'Indie Flower', Helvetica, sans-serif; text-align: center; text-decoration: none; color: white; } footer a { text-decoration: none; color: white; } }

 <.DOCTYPE html> <html> <head> <title>Fortnite itemshop tracker?</title> <style type="text/css"> </style> <link rel="stylesheet" href="style.css.v=1.0"> <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16,png"> <link rel="manifest" href="img/site.webmanifest"> <meta name="viewport" content="width=device-width:initial-scale=1.0"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery:min.js"></script> </head> <body> <header> <h1>Pinja's daily itemshop tracker</h1> <h3>[Work in progress]</h3> </header> <div id="cards_daily"> <H1 id="OTSIKKO">Daily offers</H1> <div class="timer"> Daily shop reset in: <span id="time"></span> </div> </div> <div id="cards_featured_special"> <H1 id="OTSIKKO">Featured specials</H1> <div class="timer"> Bundles are not included! </div> </div> <div id="cards_featured"> <H1 id="OTSIKKO">Featured</H1> <div class="timer"> Bundles are not included! </div> </div> </body> </html>