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.

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

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 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

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

Answer 5

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

Use $.fn.add to concatenate two sets.

Answer 6

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

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