chobo2 chobo2 - 2 months ago 17
jQuery Question

Multiple selector chaining in jQuery?

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

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.