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.

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.

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

Use $.fn.add to concatenate two sets.

You should be able to use:

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

jQuery | Multiple Selectors

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

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

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

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

If we want to apply the same functionality and features to more than one selectors then we use multiple selector options. I think we can say this feature is used like reusability. write a jquery function and just add multiple selectors in which we want the same features.

Kindly take a look in below example:

$( "div, span, .paragraph, #paraId" ).css( {"font-family": "tahoma", "background": "red"} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Div element</div>
<p class="paragraph">Paragraph with class selector</p>
<p id="paraId">Paragraph with id selector</p>
<span>Span element</span>

I hope it will help you. Namaste