CODEWITHSUNDEEP
javascriptjquerycss
xxx12123
xxx12123

Reputation: 343

style a group of eight elements with nth-of-type?

I want to style a group of divs so that every eight elements get the same left positioning. So not the every eigths element, but a group of eight elements. I've tried this with css / jquery but it only styles every eighth element, which is wrong.

var cells = $('.board-cells'),
        cellUnit = 70,
        startPos = -35;

    var left;
    for(j=0; j<8; j++){
      left = startPos+(cellUnit*j+1) + 'px';
    }
    for(i=0; i<cells.length; i+=8){
      var cellItem = $('.board-cells:nth-of-type('+i+'n+0)');
      cellItem.css('left', left);
    }

Upvotes: 0

Views: 65

Answers (3)

Asons
Asons

Reputation: 87191

How about this, no script, just CSS.

html, body {
  margin: 0;  
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container .img {
  height: 70px;
  width: calc(100% / 8);
  background: red;
  border: 2px solid white;
  box-sizing: border-box;
}
.container .img:nth-of-type(8n+1):after {
  content: '1';
}
.container .img:nth-of-type(8n+2):after {
  content: '2';
}
.container .img:nth-of-type(8n+3):after {
  content: '3';
}
.container .img:nth-of-type(8n+4):after {
  content: '4';
}
.container .img:nth-of-type(8n+5):after {
  content: '5';
}
.container .img:nth-of-type(8n+6):after {
  content: '6';
}
.container .img:nth-of-type(8n+7):after {
  content: '7';
}
.container .img:nth-of-type(8n+8):after {
  content: '8';
}
<div class="container">

      <div class="img"></div><div class="img"></div>
      <div class="img"></div><div class="img"></div>
      <div class="img"></div><div class="img"></div>
      <div class="img"></div><div class="img"></div>
      
      <div class="img"></div><div class="img"></div>
      <div class="img"></div><div class="img"></div>
      <div class="img"></div><div class="img"></div>
      <div class="img"></div><div class="img"></div>

    </div>

With this CSS you can target each group with left value

.container .img:nth-of-type(8n+1) {
  left: -34px;
}
.container .img:nth-of-type(8n+2) {
  left: 36px;
}
.container .img:nth-of-type(8n+3) {
  left: 106px;
}
.container .img:nth-of-type(8n+4) {
  left: 176px;
}
.container .img:nth-of-type(8n+5) {
  left: 246px;
}
.container .img:nth-of-type(8n+6) {
  left: 316px;
}
.container .img:nth-of-type(8n+7) {
  left: 386px;
}
.container .img:nth-of-type(8n+8) {
  left: 456px; 
}

Upvotes: 1

karina
karina

Reputation: 805

If you are trying to make a grid you could maybe create an outer div with a fixed width and then each tile within can have a fixed width that is about 1/7 the width of the outer div and have float: left styling.

If you do your math right then every 8th div should automatically break to the next row.

Read up on floating divs (and clearing floats!) Here https://css-tricks.com/all-about-floats/ for the full meal deal

Upvotes: 1

GG.
GG.

Reputation: 21834

This should solve your issue:

var cellUnit = 70;
var startPos = -35;

$('.board-cells').each(function (i, el) {
    $(el).css('left', startPos + cellUnit * (i % 8) + 1 + 'px');
});

DEMO

Upvotes: 0

Related Questions