jQuery实现：仅当所有元素无.invalid类时才执行函数

嘿，我完全懂你的困扰——用each遍历确实容易踩这个坑，因为它会逐个处理元素，没法直接帮你做整体状态判断。其实不用绕弯子，jQuery有更直接的方法来搞定这个需求，咱们一步到位：

核心思路 #

我们需要先确认：这批目标元素里是否存在任何一个带.invalid类的元素。如果存在，就不执行目标函数；只有当一个都没有的时候，才执行。

具体实现（分两种场景） #

场景1：.invalid直接加在目标元素本身

比如你的目标元素是.form-input，而.invalid是直接加在这些输入框上的，那可以用is()方法快速判断：

// 替换成你实际的目标元素类名
const $targetElements = $('.form-input');

// 只要有一个元素带.invalid，is()就返回true，取反后才执行函数
if (!$targetElements.is('.invalid')) {
  // 这里写你的目标函数逻辑
  yourTargetFunction();
}

场景2：.invalid是目标元素的子元素

如果.invalid是嵌套在目标元素内部的（比如表单字段里的错误提示标签），那用has()或者find()来判断：

const $targetElements = $('.form-field');

// 方法1：用has()检查是否包含带.invalid的子元素
if (!$targetElements.has('.invalid').length) {
  yourTargetFunction();
}

// 方法2：用find()筛选子元素，看长度是否为0
if ($targetElements.find('.invalid').length === 0) {
  yourTargetFunction();
}

为什么之前的each方法不对？ #

你之前用each的时候，大概是遍历到某个没有.invalid的元素就直接执行函数了，但这不符合需求——我们需要的是所有元素都合格才执行，而不是只要有一个合格就执行。上面的方法都是先做整体判断，确保没有任何违规元素后，才触发目标函数，逻辑更准确也更简洁。

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