CSS using loop using jquery

Question

I have 4 divs and I have to apply the background for every of them according to this array of objects. I know the method css() but didn't know how to loop work.

[
  {
    "tix_type": "adult",
    "bg": "gold",
    "tix_pax": 1
  },
  {
    "tix_type": "child",
    "bg": "brown",
    "tix_pax": 0
  },
  {
    "tix_type": "senior",
    "bg": "red",
    "tix_pax": 2
  },
  {
    "tix_type": "disabled",
    "bg": "green",
    "tix_pax": 1
  }
]

There is no need for sequence, like 1 div is green, gold and 2 divs are red.

loop would have been helpful if your inner objects also had some identifier like DIV ID to identify corresponding DIV's.. you can use jQuery('firstDIvID').css('background': arr[0]['bg']);... so on for other div's — techie_28
– techie_28, Commented Mar 28, 2016 at 12:14

Rajshekar Reddy · Accepted Answer · 2016-03-28 12:12:02Z

2

Since you haven't provided the HTML structure, This would help you understand the basic logic. you might have to change the part $('div.styleMe:eq(' + i + ')') to your respective selctors. Let me know if this helps.

var config = [{
  "tix_type": "adult",
  "bg": "gold",
  "tix_pax": 1
}, {
  "tix_type": "child",
  "bg": "brown",
  "tix_pax": 0
}, {
  "tix_type": "senior",
  "bg": "red",
  "tix_pax": 2
}, {
  "tix_type": "disabled",
  "bg": "green",
  "tix_pax": 1
}]

$.each(config,function(i, v) {
  $('div.styleMe:eq(' + i + ')').css('background-color', v.bg);
});

div {
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styleMe"></div>
<div class="styleMe"></div>
<div class="styleMe"></div>
<div class="styleMe"></div>

edited Mar 28, 2016 at 12:12

answered Mar 28, 2016 at 12:06

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jennifer Over a year ago

this is wrong, brown should not be shown as the pax is zero, there should be 2 red.

Mohit Bhardwaj · Accepted Answer · 2016-03-28 12:08:46Z

0

var styleArray = [
  {
    "tix_type": "adult",
    "bg": "gold",
    "tix_pax": 1
  },
  {
    "tix_type": "child",
    "bg": "brown",
    "tix_pax": 0
  },
  {
    "tix_type": "senior",
    "bg": "red",
    "tix_pax": 2
  },
  {
    "tix_type": "disabled",
    "bg": "green",
    "tix_pax": 1
  }
];

$(document).ready(function(){
    $(".styled-divs").each(function(index){
       $(this).css("background-color", stylesArray[index].bg );
    });
});

HTML CODE

<div class="styled-divs"></div>
<div class="styled-divs"></div>
<div class="styled-divs"></div>
<div class="styled-divs"></div>

answered Mar 28, 2016 at 12:08

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

Comments

Arun P Johny · Accepted Answer · 2016-03-28 12:17:37Z

0

If you have a common class(or any selector) to select them all then

var array = [{
  "tix_type": "adult",
  "bg": "gold",
  "tix_pax": 1
}, {
  "tix_type": "child",
  "bg": "brown",
  "tix_pax": 0
}, {
  "tix_type": "senior",
  "bg": "red",
  "tix_pax": 2
}, {
  "tix_type": "disabled",
  "bg": "green",
  "tix_pax": 1
}];

$('.target').css('background-color', function(i) {
  return array[i].bg;
});

.target {
  margin-bottom: 5px;
  min-height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>

answered Mar 28, 2016 at 12:17

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Jennifer Over a year ago

this is wrong, brown should not be shown as the pax is zero, there should be 2 red.

AKS · Accepted Answer · 2016-03-28 12:36:33Z

0

Try the jQuery css function directly.

var arrayOfObjRef = [
  {
    "tix_type": "adult",
    "bg": "gold",
    "tix_pax": 1
  },
  {
    "tix_type": "child",
    "bg": "brown",
    "tix_pax": 0
  },
  {
    "tix_type": "senior",
    "bg": "red",
    "tix_pax": 2
  },
  {
    "tix_type": "disabled",
    "bg": "green",
    "tix_pax": 1
  }
];

$('div.content').css('background-color', function(i) {
   return arrayOfObjRef[i].bg;
});

console.log('First object bg: ' + arrayOfObjRef[0].bg);
console.log('second object tix_type: ' + arrayOfObjRef[1].tix_type);
console.log('third object tix_pax: ' + arrayOfObjRef[2].tix_pax);
console.log('third object bg: ' + arrayOfObjRef[3].bg);

.content {
  height:20px;
  margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>

answered Mar 28, 2016 at 12:36

AKS

212 bronze badges

3 Comments

Jennifer Over a year ago

this is wrong, brown should not be shown as the pax is zero, there should be 2 red.

AKS Over a year ago

Where did you mention to have the dependency on pax?

Jennifer Over a year ago

There is no need for sequence, like 1 div is green, gold and 2 divs are red.

Collectives™ on Stack Overflow

CSS using loop using jquery

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related