ForEach ES6无效

Question

我遇到了forEach ES6的问题。我写了添加元素'div'使用纯javascript的函数。我想要重制代码到ecmascript 6，现在代码不起作用。为什么？我认为在ecmascript 6中写的代码写得正确。

感谢您的帮助

此代码有效：

的Javascript

function addElement() {
let linkToGallery = document.getElementsByClassName("gallery-1");
for (var i = 0; i < linkToGallery.length; i++) {
    linkToGallery[i].addEventListener('click', () => {
        const newDiv = document.createElement("div");
        const newDiv2 = document.createElement("div");
        newDiv.id = "buttonGallery";
        newDiv2.innerHTML = "";
        newDiv2.innerHTML += "<div id='test'>Test</div>";
        document.body.appendChild(newDiv);
        document.body.appendChild(newDiv2);
    });
}

}

并且此代码不起作用，为什么如果相同？

Ecmascript 6

function addElement() {
let linkToGallery = document.getElementsByClassName("gallery-1");
linkToGallery.forEach((current) => {
    current.addEventListener('click', () => {
        const newDiv = document.createElement("div");
        const newDiv2 = document.createElement("div");
        newDiv.id = "buttonGallery";
        newDiv2.innerHTML = "";
        newDiv2.innerHTML += "<div id='test'>Test</div>";
        document.body.appendChild(newDiv);
        document.body.appendChild(newDiv2);
    });
});

}

感谢您的帮助。

Answer 1

我总是将类似数组的对象转换为真正的数组，特别是因为它涉及的代码比以前少得多：

 var realArray = Array.from(document.querySelectorAll('.ele'));

或

 var realArray = [...document.getElementsByClassName("ele")];

演示

＆＃13;

＆＃13;

function addElement() {
  let linkToGallery = Array.from(document.getElementsByClassName("gallery-1"));
  linkToGallery.forEach((current) => {
    current.addEventListener('click', (e) => {
      var tgt = e.target;
      tgt.textContent = 'clicked';
      const newDiv = document.createElement("div");
      const newDiv2 = document.createElement("div");
      newDiv.id = "buttonGallery";
      newDiv2.innerHTML = "";
      newDiv2.innerHTML += "<div id='test'>Test</div>";
      document.body.appendChild(newDiv);
      document.body.appendChild(newDiv2);
    });
  });
}

addElement()

＆＃13;

section {
  border: 3px dashed red
}

div {
  border: 1px dotted blue
}

＆＃13;

<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用array-like

重复for/of

var ref = document.getElementsByClassName('gallery-1')

for (var item of ref) {
    console.log(item);
}

正如我所见，几乎所有人都支持TypedArray%.prototype[Symbol.iterator]：

Symbol.iterator

Answer 3

构建真实Array的另一种方法是使用document.querySelectorAll()创建非实时NodeList 拥有forEach()方法，与HTMLCollection返回的实时document.getElementsByClassName()不同。

＆＃13;

＆＃13;

let linkToGallery = document.querySelectorAll('.gallery-1');

linkToGallery.forEach((current) => {
  current.addEventListener('click', () => {
    const newDiv = document.createElement('div');
    const newDiv2 = document.createElement('div');
    newDiv.className = 'buttonGallery';
    // or newDiv.setAttribute('class', ...)
    newDiv2.innerHTML = '<div class="test">Test</div>';
    document.body.appendChild(newDiv);
    document.body.appendChild(newDiv2);
  });
});

＆＃13;

section {
  border: 3px dashed red
}

div {
  border: 1px dotted blue
}

＆＃13;

<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>

＆＃13;

＆＃13;

＆＃13;

作为旁注，您应该使用class属性而不是id attribute，因为它们在文档中并不是唯一的。