将.each（jquery）转换为纯Javascript

Question

我正在尝试将写在jquery上的函数转换为javascript vanilla

我知道纯JavaScript上的.each（）是.forEach（），但是我不明白我的代码缺少什么！

这里的jQuery代码：

addClickItems: function(classe) {
    $(classe).each(function (index) {
        $(classe + ":eq(" + (index) + ")").click(function () {
            if (classe === ".droite") {

        });
    });
},

这里是javascript代码：

clickImages : function (classe) {
    //classe = new Object(diaporama);
    Object.keys(classe).forEach(index => {
        classe[index].addEventListener("click", function () {

        });
    });
},

感谢帮助 ！

Answer 1

jQuery.each()方法枚举所有包含在您调用它的jQuery包装的元素集中的 DOM元素：

 $("div").each(function(index, value){ console.log(index, value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="one">one</div> <div id="two">two</div> <div id="three">three</div> 

您尝试使用Object.keys(class).forEach进行转换，其中Object.keys不是元素集，而是Object键/属性。

 var myObj = { key1: 10, key2: true, key3: "foo" }; Object.keys(myObj).forEach(function(key, index){ console.log(index, key, myObj[key]); }); 

因此，这两个用途each不相似。

如果确实有要枚举的DOM元素，则需要将它们放入JavaScript数组，然后可以在该数组上调用.forEach() 。

注意1：大多数现代浏览器都允许您直接在节点列表/ HTML集合上调用.forEach ，但是为了与那些不兼容的浏览器兼容，您需要将节点列表/ HTML集合转换为数组以确保代码将工作。 如下所示。

注意2：请注意，传递给jQuery.forEach()的回调函数本身传递了两个参数： index和value ，对于普通的JavaScript Array.forEach() ，回调函数传递了value和index （颠倒顺序） ）。

 var elements = document.querySelectorAll("div"); // Get all the elements into a node list var elArray = Array.prototype.slice.call(elements); // Convert node list to array // Now, enumerate the array with .forEach() elArray.forEach(function(value, index){ console.log(index, value); }); 

 <div id="one">one</div> <div id="two">two</div> <div id="three">three</div> 

Answer 2

在原始代码中， classe似乎是jQuery选择器。 您需要使用document.querySelectorAll()搜索所有匹配的元素并对其进行迭代：

document.querySelectorAll(classe).forEach(elt => elt.addEventListener("click", function() { 
    ...
});