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

Question

我收集了一个Array(我认为)所需的表单元素,并添加了'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()？

Answer 1

因为jQuery对象没有every方法,并且formInputs是一个jQuery对象.

如果你想要一个数组,请调用get()get one.

我收集了一个Array(我认为)所需的表单元素......

不,它只是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');
}

后者适用于所有现代浏览器,但不适用于所有旧版浏览器.但是,它可以在旧版浏览器上进行填充.有关MDN的更多信息.

Answer 2

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

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

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

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