jQuery Select # id with word as prefix and counter as suffix

Question

Is there a way to select all id\'s with jQuery with a prefix \"my\" and a suffix \"0-9\". Something like these $(\"#my$1-4\") or is it just possible with a loop ?

Answer 1

Assuming you don't have millions of elements that start with "my", you could do:

$('[id^=my]').filter(function() { return this.id.matches(/\d/) && this.id.length == 3 })

This grabs all elements that have an id starting with "my", contain a number, and are only 3 characters long (so "my54" will not match but "my6" will)

Answer 2

First thoughts, which seems to work well:

$('div[id^="my"]').filter(
    function(){
        return this.id.match(/\d+$/);
    });

JS Fiddle demo.

The above selects all div elements whose id starts with the value my, and then filters the returned elements to those whose id also ends with numeric characters.

References:

• attribute-starts-with selector.
• filter().
• Regular Expressions, at Mozilla Developer Network.

Answer 3

The prefix part is easily achievable with an attribute starts-with selector:

$("div[id^=my]");

But there is no selector that will allow you to specify a range of characters, so a loop will have to be involved. I would suggest filter:

$("div").filter(function () {
    return /^my\d$/.test(this.id);
});