0

Как мне посредством JS сделать также? То есть к примеру хочу добавить классы DIV под номером 2-3-9

let info = document.querySelector('.info');
let divElem = 11;
for (let i = 0; i < divElem; i++) {
  let column = document.createElement('div');
  column.className = 'column';
  info.append(column);
}
.column {
  background: red;
  width: 20px;
  height: 20px;
  margin: 5px;
}
  
.column:nth-child(3) {
  background: blue;
  width: 30px;
}
<div class="info"></div>

5
  • Ну, вместо 'column' пишите нужный вам класс с нужным вам номером? Или о чём вопрос?
    – andreymal
    8 дек 2019 в 11:55
  • Не совсем понимаю... Можете подробнее написать. У меня была мысль сделать так: column[2].className = 'newClass'; но ошибка в таком случае...
    – hitFM
    8 дек 2019 в 11:59
  • 1
    Вы хотите добавить класс второму, третьему и девятому элементам? Ну тогда проверяйте значение переменной i через if
    – andreymal
    8 дек 2019 в 12:06
  • Сейчас попробую, спасибо за подсказку)
    – hitFM
    8 дек 2019 в 12:10
  • Получилось, можете в ответ написать, я поставлю, что Вы ответили. if( i == 2){column.className = 'column-3';}
    – hitFM
    8 дек 2019 в 12:14

1 ответ 1

0

Легче сделать массив с нужными номерами и проверять наличие числа в массиве, чем писать цепочки проверок if, так:

let info = document.querySelector('.info');
let divElem = 11;
let blueIndexes = [2, 3, 9];

for (let i = 0; i < divElem; i++) {
  let column = document.createElement('div');  
  let color = blueIndexes.includes(i) ? " blue" : "";
  // Обращаю внимание на пробел перед blue
  
  column.className = "column" + color;

  info.appendChild(column);
}
.column {
  background: red;
  width: 20px;
  height: 20px;
  margin: 5px;
}

.column.blue {
  background-color: blue;
  width: 30px;
}
<div class="info"> </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.