Is there a wildcard for identifiers (id)?

Question

If I have an unknown number of identifiers sharing a particular naming scheme, is there a way to capture them immediately with jQuery?

// These are the IDs I'd like to select #instance1 #instance2 #instance3 #instance4 // What do I need to add or how do I need to modify this jQuery selector in order to select all the IDs above? ("#instanceWILDCARD").click(function(){} 

Answer 1

The attribute starts with a selector ( '^= ) will work for your identifiers, for example:

 $("[id^=instance]").click(function() { //do stuff }); 

However, consider giving your elements a common class, for example (I hack myself) .instance and use this selector:

 $(".instance").click(function() { //do stuff }); 

Answer 2

If you really want to map classes, not identifiers, the syntax is a bit more active, since a class can have multiple values.

 // handle elements like <div class="someclass1"></div> $('[class^="someclass"]').click(function() { // do stuff }); // handle elements like <div class="foo someclass1"></div> $('[class*=" someclass"]').click(function() { // do stuff }); 

Answer 3

I am surprised that no one mentioned creating your own filter selector (an extension of the functionality of JQuery Selector). Here I created wildcard selectors, which I called "likeClass" and "likeId", which takes any wildcard and finds all the elements that match (similar to Regex matching).

The code:

 $.expr[':'].likeClass = function(match){ return $('[class*=" '+ match +'"]'); }; $.expr[':'].likeId = function(match){ return $('[id*=" '+ match +'"]'); }; 

Usage example

Now suppose you have several div elements with similar names, such as .content-1, .content-2, .content-n ... etc., and you want to select them. Now it's a cake!

$ ('DIV: likeClass (content -)'); // Returns all elements that have the same class name: content - *

or

$ ('DIV: likeClass (content -)'); // Returns all elements with a similar identifier: content - *

Oh yes, one more thing ... you can hook it too. :)

 $('li:likeId(slider-content-)').hide().addClass('sliderBlock').first().fadeIn('fast'); 

Enjoy it!

Answer 4

No need for additional expr or anything interesting if you have jQuery

 jQuery('[class*="someclass"]').click(function(){ }); jQuery('[id*="someclass"]').click(function(){ }); 

As noted: stack overflow

Answer 5

Why don't you just assign class = "instance" all of them and select them with $('.instance') ?

Answer 6

These are identifiers, but you can do something similar to:

 $("[id^='instance']").click(...) 

This is a bit expensive - it helps if you can specify either a) the type of the element, or b) the general position in the DOM, for example:

 $("#someContentDiv span[id^='instance']").click(...) 

The selector [id^='...'] basically means "find an element whose identifier begins with this line, similar to id$= (ID ends with this line), etc.

You can find an exhaustive list on the jQuery Docs page here .

Answer 7

Use carrots.

 $("div[id^=instance]").hide(); 

JsFiddle example

Answer 8

We can do this as follows:

 $(document).ready(function () { $('[id*=btnOk]').live("click", function () { }); }); 

Answer 9

This is the only correct answer to the id template question.

 $('[id*="Wild card in double quotes"]') 

This will get "Wild card in double quotes, and there is more !!!", as well as "More BS in front of Wild Wild Card in double quotes."

You must use quotation marks other than your [] tags.