Select element with complex ID pattern

Question

I have set of buttons like this:

<button id="grid1_createBtn">Create</button>
<button id="grid1_updateBtn">Update</button>
<button id="grid2_createBtn">Create</button>
...

These button does not have any class, so I need to select them via their ID. The "grid" part of id is static and same for all buttons. I found this answer, but I don't want to use $("[id^=grid]"), because may be some other other element with starting id "grid" exist. Can anyone help me?

As @MirzaDanishBaig suggests can you not add the class? It would be the simplest option and reduce your selector to: `$('button.something')` — scunliffe, Jun 11 '15 at 10:52

score 6 · Answer 1 · answered Jun 08 '15 at 11:09

6

To select the buttons with a regular expression, you may use filter like this :

$('button').filter(function(){
    return /^grid\d+_\w+Btn$/.test(this.id)
})

answered Jun 08 '15 at 11:09

Denys Séguret

355,860
83
755
726

I never think about using filter, despite this being super-neat and super-powerful. – Jeremy Thille Jun 08 '15 at 11:15

score 0 · Answer 2 · answered Jun 08 '15 at 11:09

0

Try this:

var id= 1;
$("button[id*='grid" + id+ "_createBtn']");

answered Jun 08 '15 at 11:09

Rohit Arora

2,206
2
23
39

score 0 · Answer 3 · answered Jun 08 '15 at 11:19

0

You may also combine attribute selectors like below as long as all your buttons start with grid and end with Btn.

$('button[id^="grid"][id$="Btn"]')

-A Demo-

answered Jun 08 '15 at 11:19

lshettyl

8,016
4
23
30

Raúl Martín · Answer 4 · 2015-06-08T12:45:32.050

0

You can combine!

$("[id^='grid'][id$='Btn']")

$("[id^='grid'][id$='Btn'][id*='_']")

or you can mix with Denis Seguret aproach

$("button[id^='grid']").filter( 
    function(){
        return /^grid\d+_(create|update)Btn$/.test(this.id);
    }
)

this is faster than only the filter.

edited Jun 08 '15 at 12:45

answered Jun 08 '15 at 11:38

Raúl Martín

4,026
2
20
39

Select element with complex ID pattern

4 Answers4