从所有匹配的表单元素中删除一个类..最干净的方式？答案

【问题标题】：Removing a class from ALL matched form elements.. cleanest way?从所有匹配的表单元素中删除一个类..最干净的方式？
【发布时间】：2013-01-25 21:20:34
【问题描述】：

我正在尝试在检查顶级单选按钮时清除表单元素上的一堆错误。我正在寻找：

提高性能的替代方法和结构
一种用于查找所有表单元素的链接方法，因此我不会进行太多调用..（不确定是否可能）。

// 在调用下面的函数之前定义的全局变量或作用域变量..

JS

var target = jQuery("#cachedElement");


function functionWithManyReferencesToTarget() {
    target.find("input").each(function() {
    $(this).removeClass("formError error-state");
});
target.find("label").each(function() {
    $(this).removeClass("formError error-state");
});
target.find("select").each(function() {
    $(this).removeClass("formError error-state");
});
}

【问题讨论】：

看来你打错字了，应该是：var $target = jQuery('#cachedElement');
谢谢，对不起，我并不是要使用 $target，也不是要在每个 .each() 中将 $(this) 设置为一个 var！更新了...

标签： javascript jquery performance methods chaining

【解决方案1】：

$target.find('input, label, select').removeClass('formError error-state');

【讨论】：

您可能通过使用 "input.formError.error-state, label.formError.error-state, select.formError.error-state" 仅命中所需的元素来获得微小的性能提升
@JimDeville 正确！我将把它留给OP。感谢您的评论。

【解决方案2】：

removeClass 遍历所有匹配的元素和you can use commas (,) to separate multiple selectors，因此您的调用可以简化为：

$('#cachedElement').find('input, label, select').removeClass('formError error-state');

【讨论】：

+1 这将具有与原始代码完全相同的效果，即将类 formError 保留在 <div> 上，等等。

【解决方案3】：

你就不能这样做吗：

$('.formError').removeClass('formError error-state');

【讨论】：

很公平。改为反映。

【解决方案4】：

这使它成为一个单线：

jQuery("#cachedElement").find("input, label, select").removeClass("formError error-state");

【讨论】：

【解决方案5】：

怎么样？

(function($){
    var $target = $('#cachedElement'); // This is confusing

    $target.find('input, label, select').removeClass('formError error-state');
}(jQuery));

【讨论】：

【解决方案6】：

使用 jQuery 的 super chaining 功能，可以将代码清理如下：

   jQuery("#cachedElement").find("input, label, select").each(function() {
      $(this).removeClass("formError error-state");
   });

这很难使它成为单行 javascript 代码。希望这可以帮助您更好地维护您的代码。

【讨论】：