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

• 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

6 Answers 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.