Hi i wanted to know how would i get nth of each div
I added comments in the code on what i want to do
Thanks
<div class = "card">div1</div>
<div class = "card">div2</div>
<div class = "card">div3</div>
<div class = "card">div4</div>
<div class = "card">div5</div>
<div class = "card">div6</div>
<div class = "card">div7</div>
<div class = "card">div8</div>
<div class = "card">div9</div>
<div class = "card">div10</div>
<div class = "card">div11</div>
<div class = "card">div12</div>
so on .........
$(".card").each(function (i, card) {
if(div1, div4, div7, div10, ...)
//do stuff
else (div2, div5, div8, div11, ...)
//do stuff
else (div3, div6, div9, div12, ...)
});
Try using the :nth-child() pseudo selector.
div {
height: 50px;
width: 100%;
}
div:nth-child(3n+1) {
background-color: red;
}
div:nth-child(3n+2) {
background-color: blue;
}
div:nth-child(3n+3) {
background-color: green;
}<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
<div class="card">div4</div>
<div class="card">div5</div>
<div class="card">div6</div>
<div class="card">div7</div>
<div class="card">div8</div>
<div class="card">div9</div>
<div class="card">div10</div>
<div class="card">div11</div>
<div class="card">div12</div>You can use modulo on the index i, such as i % n where n is the different number of cases you want to check for. For example, if we wanted to break into four (4) conditions -
$(".card").each(function (i, card) {
if (i % 4 == 0)
// ...
else if (i % 4 == 1)
// ...
else if (i % 4 == 2)
// ...
else if (i % 4 == 3)
// ...
})
for (let i=0; i<20; i++)
console.log(i, i%4)| i | i % 4 |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 0 |
| 5 | 1 |
| 6 | 2 |
| 7 | 3 |
| 8 | 0 |
| 9 | 1 |
| 10 | 2 |
| 11 | 3 |
| 12 | 0 |
| 13 | 1 |
| 14 | 2 |
| 15 | 3 |
| 16 | 0 |
| 17 | 1 |
| 18 | 2 |
| 19 | 3 |