#javascript #html #jquery
#язык JavaScript #HTML #jquery
Вопрос:
Привет, я хотел знать, как бы я получил n-ю часть каждого div
Я добавил комментарии в код о том, что я хочу сделать
Спасибо
lt;div class = "card"gt;div1lt;/divgt; lt;div class = "card"gt;div2lt;/divgt; lt;div class = "card"gt;div3lt;/divgt; lt;div class = "card"gt;div4lt;/divgt; lt;div class = "card"gt;div5lt;/divgt; lt;div class = "card"gt;div6lt;/divgt; lt;div class = "card"gt;div7lt;/divgt; lt;div class = "card"gt;div8lt;/divgt; lt;div class = "card"gt;div9lt;/divgt; lt;div class = "card"gt;div10lt;/divgt; lt;div class = "card"gt;div11lt;/divgt; lt;div class = "card"gt;div12lt;/divgt; 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, ...) });
Ответ №1:
Попробуйте использовать :nth-child()
псевдо-селектор.
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; }
lt;div class="card"gt;div1lt;/divgt; lt;div class="card"gt;div2lt;/divgt; lt;div class="card"gt;div3lt;/divgt; lt;div class="card"gt;div4lt;/divgt; lt;div class="card"gt;div5lt;/divgt; lt;div class="card"gt;div6lt;/divgt; lt;div class="card"gt;div7lt;/divgt; lt;div class="card"gt;div8lt;/divgt; lt;div class="card"gt;div9lt;/divgt; lt;div class="card"gt;div10lt;/divgt; lt;div class="card"gt;div11lt;/divgt; lt;div class="card"gt;div12lt;/divgt;
Комментарии:
1. также потрясающий вариант 😀
2. @Mulan для таких моделей, как эти, это лучший вариант.
Ответ №2:
Вы можете использовать индекс по модулю i
, например, i % n
где n
указано разное количество случаев, которые вы хотите проверить. Например, если бы мы хотели разбиться на четыре (4) условия —
$(".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; ilt;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 |