Multiple selector chaining in jQuery?

Question

Normally when I use a class as a selector I try to use an "id" selector with it so it does not search through the entire page but only an area where the class would be.

However I have a partial view with code in it. This partial view (common code) gets wrapped around a form tag.

I have:

<form id="Create"> // load common code in from partial view </form>  <form id="Edit"> // load common code in from partial view </form> 

Now in this common code I need to attach a plugin to multiple fields so I would do

$('#Create .myClass').plugin({ options here});  $('#Edit .myClass').plugin({options here}); 

So it's pretty much the same code. I am wondering if there is a way to make it look for either of the id's?

Edit

I am having problems with it when I have variables for my selectors

    my.selectors =      {         A: '#Create',         B: '#Edit',         Plugin: ' .Plugin'      };   $(selector.A+ selectors.Plugin, selector.B+ selectors.Plugin) 

Does not seem to run.

Answer 1

You can combine multiple selectors with a comma:

$('#Create .myClass,#Edit .myClass').plugin({options here}); 

Or if you're going to have a bunch of them, you could add a class to all your form elements and then search within that class. This doesn't get you the supposed speed savings of restricting the search, but I honestly wouldn't worry too much about that if I were you. Browsers do a lot of fancy things to optimize common operations behind your back -- the simple class selector might be faster.

Answer 2

$("#Create").find(".myClass").add("#Edit .myClass").plugin({});

Use $.fn.add to concatenate two sets.