Question

我一直感到困惑，因为我注意到以下两个案例没有得到我期望的结果；

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

浏览器说这2种情况是相同的变量类型，即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>

未捕获的TypeError：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);
})

有什么方法可以将元素作为纯JavaScript的函数？

1 个答案: