admin 管理员组

文章数量: 1086019

I'm trying to clear a bunch of error styling on form elements whenever top level radio buttons are checked. I'm trying to find:

  • Alternative methods and structure for improving performance

  • A chaining method for finding all the form elements so I'm not making so many calls.. (not sure if possible).

    // Global variable OR scoped variable defined just before calling functions below..

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");
});
}

I'm trying to clear a bunch of error styling on form elements whenever top level radio buttons are checked. I'm trying to find:

  • Alternative methods and structure for improving performance

  • A chaining method for finding all the form elements so I'm not making so many calls.. (not sure if possible).

    // Global variable OR scoped variable defined just before calling functions below..

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");
});
}
  • javascript
  • jquery
  • performance
  • methods
  • chaining
Share Improve this question edited Jan 28, 2013 at 15:25 gogogadgetinternet asked Jan 25, 2013 at 21:20 gogogadgetinternetgogogadgetinternet 6,1094 gold badges26 silver badges29 bronze badges 2
  • 1 it looks like you've got a tyop, it should probably be: var $target = jQuery('#cachedElement'); – zzzzBov Commented Jan 25, 2013 at 21:23
  • thanks, sorry I actually did not mean to use $target, nor did I mean to set $(this) to a var inside every .each()! Updated that... – gogogadgetinternet Commented Jan 28, 2013 at 15:26
Add a ment  | 

6 Answers 6

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

removeClass iterates over all the matched elements, and you can use mas (,) to separate multiple selectors, so your calls could be reduced to:

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

Can't you just do something like:

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

This makes it an oneliner:

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

How's this?

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

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

using the super chaining feature of jQuery the code can be cleaned as below:

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

which hardly makes it a one liner javascript code. Hope this helps you in better maintaining your code.

本文标签： javascriptRemoving a class from ALL matched form elements cleanest wayStack Overflow

版权声明：本文标题：javascript - Removing a class from ALL matched form elements.. cleanest way? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744051500a2525102.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。