3

Добрых времени суток! Проблема в следующем, возникла задача добавить созданный span в каждый 2-ой(!) элемент в блоке div.test, как это можно сделать? Пытался следующим образом:

var element = document.createElement("span");
element.classList.add("span-test");
var index = 1;

[...document.querySelectorAll(".test")].forEach(test => [...test.querySelectorAll(".test-2")[index]].forEach(test2 => test2.appendChild(element)));
.span-test {
  height: 30px;
  width: 30px;
  background-color: red;
}
<div class="test">
  <div class="test-2"></div>
  <div class="test-2"></div>
</div>
<div class="test">
  <div class="test-2"></div>
  <div class="test-2"></div>
</div>

Пишет, что:

Uncaught TypeError: test.querySelectorAll[index] is not iterable

Подскажите, что делаю не так? Как можно добавить элемент в каждый 2-ой элемент div.test-2 (Обязательно в родителе div.test);

1 ответ 1

3

Вы не можете добавлять один и тот же элемент в несколько родителей и ожидать, что он чудесным образом размножится.

document.querySelectorAll(".test").forEach(test => {
  test.querySelectorAll(".test-2").forEach((test2, index) => {
    if (index % 2 == 1) {
      var element = document.createElement("span");
      element.classList.add("span-test");
      test2.appendChild(element);
    }
  });
});

document.querySelectorAll(".test > .test-2:nth-child(2n)").forEach(test2 => {
  var element = document.createElement("span");
  element.classList.add("span-test");
  element.textContent = "TEST";
  test2.appendChild(element);
});
.span-test {
  height: 30px;
  width: 30px;
  background-color: red;
}

.test {
  border: 2px solid green;
  margin:3px;
}

.test-2 {
  border: 1px solid black;
  min-height:5px;
  margin:3px;
}
<div class="test">
  <div class="test-2"></div>
  <div class="test-2"></div>
</div>
<div class="test">
  <div class="test-2"></div>
  <div class="test-2"></div>
</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.

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