Is there a wildcard selector for identifiers (id)?

Question

If I have an unknown amount of identifiers sharing a specific naming-scheme, is there a way to grab them all at once using 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 selector ('^=) will work for your IDs, like this:

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

However, consider giving your elements a common class, for instance (I crack myself up) .instance, and use that selector:

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

Answer 2

If you really want to match classes, not ids, the syntax is a bit more involved, since 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'm surprised no one has mentioned creating your own filter selector (by extending jQuery's Selector functionality). Here I've created a wildcard selectors I called "likeClass" and "likeId" that accepts any wildcard string and will find all elements that are a match (similar to Regex matching).

Code:

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

Example Usage:

Now let's say you had multiple div elements with similar names like .content-1, .content-2, .content-n... etc and you want to select them. Now it's cake!

$('div:likeClass(content-)'); // Returns all elements that have a similar Classname: content-*

or

$('div:likeClass(content-)'); // Returns all elements that have a similar ID: content-*

Oh yeah, one more thing... you can chain it too. :)

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

Enjoy!

Answer 4

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

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

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

As noted: https://stackoverflow.com/a/2220874/2845401

Answer 5

Those are IDs, but you can do something similar to:

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

That's a bit expensive though - it helps if you can specify either a) the type of element or b) a general position in the DOM, such as:

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

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

You can find a comprehensive list on the jQuery Docs page here.

Answer 6

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

Answer 7

Use the carrot.

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

jsFiddle example

Answer 8

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

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

This will get "Wild card in double quotes. And there's more!!!", and also "More BS in front of Wild. Wild card in double quotes".

You should use quote marks that are different than your '[]' tags.

Answer 9

We can do it this way:

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

    });
});