Multiple selector chains in jQuery?

Question

Usually, when I use a class as a selector, I try to use the "id" selector so that it does not view the entire page, but only the area in which the class would be.

However, I have a partial view with the code in it. This partial view (generic code) is 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 general code, I need to attach the plugin to several fields so that I do

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

So this is almost the same code. I am wondering if there is a way to make it look for any of the identifiers?

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) 

It doesn't seem to work.

Answer 1

You can combine several selectors with a comma:

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

Or, if you have a bunch, you can add a class to all of your form elements and then search in that class. This does not give you the expected time savings on limiting your search, but I honestly would not worry too much about it if I were you. Browsers do a lot of fancy things to optimize common operations behind - a simple class selector can be faster.

Answer 2

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

Use $.fn.add to combine the two sets.

Answer 3

You should be able to use:

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

jQuery | Multiple selectors

Answer 4

I think you can see a slightly better performance by doing this:

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

Answer 5

as:

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

You can specify any number of selectors combined into one result. This multiple expression combinator is an effective way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be the same as they will be in the order of the document. an alternative to this combinator is .add ().

• Multiple selector
• Add method

Answer 6

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

Especially when we want to use regular expressions that are different from the standard ones.

In this case, it will 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, here this solution can be useless, but for further problems it is a very good option