CODEWITHSUNDEEP
javascriptjqueryhtmlcss
spen123
spen123

Reputation: 3524

Group HTML element in groups of 2

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?

Upvotes: 2

Views: 449

Answers (5)

andi
andi

Reputation: 6522

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/

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122077

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;
}

Upvotes: 1

Luca Poddigue
Luca Poddigue

Reputation: 1082

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;
}

Upvotes: 0

guest271314
guest271314

Reputation: 1

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>

Upvotes: 1

user3128979
user3128979

Reputation:

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; 
     }

Upvotes: 0

Related Questions