有什么方法可以在纯 javascript 中将元素作为函数获取？

Question

我很困惑，因为我注意到以下这 2 个案例的结果与我预期的不同；

console.log(typeof document.querySelector('.holder'));
console.log(typeof $('.holder'));

浏览器说这两种情况是相同的变量类型，object。但是当我尝试添加 .each 方法时，它说 document.querySelector('.holder') 不是函数。

    'use strict'
    const createMenuTable = (root, clips) => {
      return root.each(() => {
        console.log(root);
      })
    }
    let myTable = createMenuTable(
      document.querySelectorAll('.table'), 
      document.querySelector('.layerGroup')
    ); // When I change the `root` argument to the `$('.table')`, it runs w/o an error.

<div class="table">
  <div class="layerGroup">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

未捕获的类型错误：root.each 不是函数

我的目标是像 jQuery 一样使用普通的 JavaScript 将element 作为函数，但不知道如何解决这个问题。

如果有人能解释一下为什么这两种情况即使它们的变量类型相同，也没有给出相同的结果，我将不胜感激。

Answer 1

querySelectorAll 方法返回一个 NodeList，它没有像 each 这样的任何方法，但您可以为此目的使用 NodeList#forEach 方法。

return root.forEach((ele) => {
   console.log(ele);
})

---

在 jQuery 中，each() 方法仅适用于 jQuery 对象，因此您可以通过 jQuery 包装集合来制定通用解决方案。

return $(root).each((i, ele) => {
   console.log(ele);
})