将jQuery的.each()转换为原生JavaScript时遇问题求助

嘿，我来帮你搞定这个转换问题！先看你给出的jQuery代码，它本身有语法小问题（比如if语句没写完、函数闭合不完整），不过核心逻辑我看明白了：给所有匹配classe选择器的元素逐个绑定点击事件，当选择器是.droite时执行对应逻辑。

你知道$.each()对应原生的forEach()这点没错，但可能在元素获取和事件绑定的细节上踩坑了，我来给你梳理正确的写法：

先补全并拆解你的jQuery核心逻辑 #

原jQuery代码补全语法错误后，核心逻辑大概是这样（顺便优化了冗余的元素获取）：

addClickItems: function(classe) {
  $(classe).each(function(index) {
    // 这里直接用this就能拿到当前元素，不用重新通过eq选择器获取
    $(this).click(function() {
      if (classe === ".droite") {
        // 这里是你要执行的具体逻辑，比如打印索引或者操作元素
        console.log("点击了.droite类的元素，索引是" + index);
      }
    });
  });
}

对应的原生JavaScript实现 #

原生JS里我们不需要依赖jQuery的选择器和事件绑定，直接用浏览器原生API就能实现，代码如下：

clickImages: function(classe) {
  // 1. 用querySelectorAll获取所有匹配选择器的元素，返回NodeList
  const elements = document.querySelectorAll(classe);
  
  // 2. 遍历每个元素，绑定点击事件
  elements.forEach(function(element, index) {
    element.addEventListener('click', function() {
      if (classe === ".droite") {
        // 这里写你要执行的具体逻辑，比如操作当前元素或者打印信息
        console.log("点击了.droite类的元素，索引是" + index);
      }
    });
  });
}

你可能踩的几个坑 #

• 错误使用Object.keys()：你代码里提到Object.key...，这是不对的，document.querySelectorAll()返回的是NodeList（类数组对象），不是普通JS对象，直接用它自带的forEach遍历就行，现代浏览器都支持这个方法。
• 重复获取元素：像你jQuery里用$(classe + ":eq(" + index + ")")重新获取元素的操作完全冗余，原生forEach的第一个参数就是当前遍历到的元素，直接用它就行。
• 语法不完整：你写的原生代码没写完，一定要确保函数、条件语句都正确闭合，不然会直接报错。

如果你的逻辑还有其他细节（比如点击后要做的具体操作），可以在这个基础上调整，这个结构完全符合你的需求~

内容的提问来源于stack exchange，提问作者Noureddine