Group HTML element in groups of 2

Question

I have some HTML that looks like this:

<div class="primary-billing">
  <div>1</div>
  <div>4</div>
  <div>3</div>
  <div>10</div>
  <div>5</div>
  <div>5</div>
  <div>4</div>
  <div>3</div>
  <div>10</div>
  <div>5</div>
  <div>5</div>
</div>

And I want to group the elements in groups of two so that I can set each groups background to a different color, right now I am doing it like this:

.primary-billing div:nth-child(n+1):nth-child(-n+2){
   background: yellow;   
}

.primary-billing div:nth-child(n+3):nth-child(-n+4){
   background: blue;   
}

.primary-billing div:nth-child(n+5):nth-child(-n+6){
   background: purple;   
}

But as in my actual code it is much longer and there must be a better way, I'm also trying to do it in Javascript where I could have an array of the colors I wanted, but still am not sure how to group the element in groups of 2. Here is a JSBin with the code JSBin

How could I get them in groups of two using Javascript or CSS?

Possible duplicate of [Wrap every 3 divs in a div](http://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div) — giorgio, Dec 02 '15 at 20:03
@giorgio - this question is just about styling. No changes to the DOM. So it's not a duplicate of the one you mentioned. — andi, Dec 02 '15 at 20:12
@andi sorry got misguided by the last sentence ("How using javascript ..."). Removing the close vote. But I'll [link to the question](http://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div) anyway, because it good lead to another solution for the same problem. — giorgio, Dec 02 '15 at 20:20

score 2 · Answer 1 · answered Dec 02 '15 at 20:21

2

Since everyone else did this with CSS, I'm going to go the JavaScript route (which I think may be simpler):

var colors = ['red', 'orange', 'yellow', 'green', 'pink', 'brown'];
$('.primary-billing').children().each(function(i){
  $(this).css('background', colors[Math.floor(i/2)%colors.length]);
});

http://jsfiddle.net/yLa3dso1/

answered Dec 02 '15 at 20:21

andi

6,442
1
18
43

This way, it's an easy change if you want to add or remove colors, change the number of items per group, etc. – andi Dec 02 '15 at 20:22

score 1 · Accepted Answer · answered Dec 02 '15 at 20:01

Try using while loop , .slice()

var colors = ["yellow", "blue", "purple"]
, c = n = 0, divs = $(".primary-billing div");

while (n < divs.length) {
  divs.slice(n, n + 2).css("background-color", colors[c]);
  c = ++c % colors.length; n += 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="primary-billing">
  <div>1</div>
  <div>4</div>
  <div>3</div>
  <div>10</div>
  <div>5</div>
  <div>5</div>
  <div>4</div>
  <div>3</div>
  <div>10</div>
  <div>5</div>
  <div>5</div>
</div>

Nenad Vracar · Answer 3 · 2015-12-02T20:16:49.830

Try this https://jsfiddle.net/2Lzo9vfc/253/

Or if you want 10 different colors just do this https://jsfiddle.net/2Lzo9vfc/254/

.primary-billing div:nth-child(6n+1), 
.primary-billing div:nth-child(6n+2)  {
  background: blue;
}

.primary-billing div:nth-child(6n+3), 
.primary-billing div:nth-child(6n+4)  {
  background: red;
}

.primary-billing div:nth-child(6n+5), 
.primary-billing div:nth-child(6n+6)  {
  background: green;
}

score 0 · Answer 4 · answered Dec 02 '15 at 19:57

If I correctly understood the question

<div class="primary-billing">
    <div class="first-group">1</div>
    <div class="first-group">4</div>
    <div class="second-group">3</div>
    <div class="second-group">10</div>
    <div class="third-group">5</div>
    <div class="third-group">5</div>
</div>

    .primary-billing .first-group{
         background: yellow; 
     }
    .primary-billing .second-group{
         background: blue; 
     }
    .primary-billing .third-group{
         background: purple; 
     }

yes you did but I need to do this for a much longer list in reality, so this would be a feasible way — spen123, Dec 02 '15 at 19:58

score 0 · Answer 5 · answered Dec 02 '15 at 20:01

As far as I understand, your goal is not applying a specific pattern for the background (e.g. odd rows of one color, even rows with another). You could achieve the same result in your example by assigning classes to each couple of divs, that would definitely simplifiy your CSS. Your HTML would become something like:

<div class="primary-billing">
  <div class="blueBg">1</div>
  <div class="blueBg">4</div>
  <div class="yellowBg">3</div>
  <div class="yellowBg">10</div>
  <div class="purpleBg">5</div>
  <div class="purpleBg">4</div>
</div>

And your CSS would be just:

.yellow {
  background: yellow;
}
.blue {
  background: blue;
}
.purple {
  background: purple;
}

Group HTML element in groups of 2

5 Answers5