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 should be able to use:

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

jQuery | Multiple Selectors

Answer 2

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 3

There are already very good answers here, but in some other cases (not this in particular) using map could be the "only" solution.

Specially when we want to use regexps, other than the standard ones.

For this case it would look like this:

 $('.myClass').filter(function(index, elem) {
    var jElem = $(elem);

    return jElem.closest('#Create').length > 0 || 
           jElem.closest('#Edit').length > 0;

}).plugin(...);

As I said before, here this solution could be useless, but for further problems, is a very good option

Answer 4

I think you might see slightly better performance by doing it this way:

$("#Create, #Edit").find(".myClass").plugin(){
    // Options
});

Answer 5

like:

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

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order. An alternative to this combinator is the .add() method.

• Multiple Selector
• Add method

Answer 6

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

Use $.fn.add to concatenate two sets.