Question

我试图将在jquery上编写的函数转换为javascript vanilla

我知道.each（）是关于纯javascript的.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 wrapped set of elements 中包含的所有单个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(classe).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，其中vanilla 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() { 
    ...
});

将.each（jquery）转换为Pure Javascript

2 个答案: