为什么.every()不是一个函数？

Question

我已经收集了一组（我认为是）必需的表单元素，并添加了“blur”侦听器。

    var formInputs = $(':input').filter('[required]');
  formInputs.each(function(i) {
    $(this).on('blur', function() { // Each time we leave a 'required' field, check to see if we can activate the 'submit' button.
      submitEnabler(formInputs);
    });
  });

所以，一旦有人离开这些字段中的一个，我想使用.every()遍历此数组并检查字段是否有效——也就是说，它们是否具有我定义的“success”类。

function isValid(input) {
  return input.hasClass('is_glowing_success');
}

function submitEnabler(inputs) {

  console.log(inputs.every(isValid));
}

我一直收到如下信息：

Uncaught TypeError: inputs.every is not a function
    at submitEnabler

现在，我可以像这样做...

for (var i = 0; i < inputs.length; i++) {
    if ($(inputs[i]).hasClass('is_glowing_success')) {
      console.log('yes');
    } else {
      console.log('no');
    }
  }

但是，为什么我不能只使用：Array.Prototype.every()？

- CodeFinity

---

要改善代码，你可以编写$(':input[required]').blur(submitHandler);，并对submitHandler进行更改以访问inputs。 - Tushar

@Tushar 我已经这样做了：$（'：input [required]'）.blur（submitHandler（formInputs））; 运行得很好！谢谢！以前的代码确实有点“不舒服”。 - CodeFinity

应该是.blur(function() { submitHandler(formInputs); });。否则，处理程序将立即被调用而不是在 blur 事件上。 - Tushar

完全正确。我现在明白了，很有道理。 - CodeFinity

Answer 1

因为jQuery对象没有every方法，而formInputs是一个jQuery对象。如果你想要一个数组，可以调用get()方法来获取一个数组。

我已经收集了一组所需的表单元素...

不，它只是一个jQuery对象。jQuery对象非常类似于数组，但它们并不是数组。更糟糕的是，它们有一些类似于数组的方法（例如filter和map），这些方法使用的回调函数参数与等效的Array.prototype方法不同。

在isValid中，你需要处理现在正在处理原始DOM元素的事实，这意味着你需要将其包装成一个jQuery对象并使用hasClass方法：

function isValid(input) {
  return $(input).hasClass('is_glowing_success');
}

或者使用DOM的classList：

function isValid(input) {
  return input.classList.contains('is_glowing_success');
}

后者适用于所有现代浏览器，但并非所有旧版浏览器。然而，它可以在旧版浏览器上进行polyfill。更多信息请参见MDN。

- T.J. Crowder

---

啊，那么使用get()方法可以获取到我想要的数组，这样我就可以使用那个方法...好的，稍后尝试。谢谢。 - CodeFinity

@guest271314 我也有同感，但.every() 的好处在于一旦遇到失败就停止循环，而.filter必须检查每个元素并构建一个新的jQuery集合。 - Barmar

@Barmar 这将是一个有用的 $ .fn 方法或在 $ 对象本身定义的函数。这是一个 jQuery 方法，当满足条件时中断并返回一个 Boolean，其中 context 设置为原始选择器，或者能够设置为特定的选择器或对象; 或者原始对象或选择器设置为方法内回调函数的预期参数。如何表达这样的问题？以上是否足够？ - guest271314

@Barmar Reflect.apply()或jQuery.proxy()可以设置函数调用的上下文。除非上下文一词被不当使用，以上句子正确吗？ - guest271314

这非常不同，使用接收布尔值的回调函数。这本质上是 Wheeler 定律的一种形式：计算机科学中的任何问题都可以通过增加间接层来解决。 - Barmar

Answer 2

jQuery没有.every()方法。 .every定义在Array.prototype中。

您可以使用.toArray()将jQuery对象转换为Array，在.every()回调函数中将当前的DOM元素传递给jQuery()，以获取元素的jQuery对象表示，其中可以链接.hasClass()。

function submitEnabler(inputs) {
  console.log(inputs.toArray().every(isValid));
}

function isValid(input) {
  return $(input).hasClass('is_glowing_success');
}

- guest271314

Answer 3

我建议您使用数组.map()，例如当input是数组时：

input.map(function(input){ return $(input).hasClass('is_glowing_success'); });

这只是一个例子，更多内容请在此处阅读。

- Hassan Sani

---

我看了一下...但我并不想像map函数那样在处理每个元素后生成另一个数组。谢谢。 - CodeFinity

这将返回一个布尔数组。但这并不会告诉你每个元素是否匹配。 - Barmar