Wildcards in jQuery selectors

Question

I'm trying to use a wildcard to get the id of all the elements whose id begin with "jander". I tried $('#jander*'), $('#jander%') but it doesn't work..

I know I can use classes of the elements to solve it, but it is also possible using wildcards??

<script type="text/javascript">

  var prueba = [];

  $('#jander').each(function () {
    prueba.push($(this).attr('id'));
  });

  alert(prueba);


});

</script>

<div id="jander1"></div>
<div id="jander2"></div>

This is a question about jQuery (or more exactly the Sizzle engine). — Peter Örneholm, Mar 21 '11 at 10:37
Just a note: It would be much faster to do it with classes as jQuery or Sizzle can make use of browser functions (should not make much of a difference for modern browsers though). — Felix Kling, Mar 21 '11 at 10:47
possible duplicate of [JQuery selector regular expressions](http://stackoverflow.com/questions/190253/jquery-selector-regular-expressions) — Robert MacLean, Aug 31 '11 at 09:39
Also, an important thing to note is that `$("[id*=jander]")` would select all elements with an ID containing the string jander. — Gabriel Ryan Nahmias, Jul 08 '12 at 11:03

nico · Accepted Answer · 2012-07-08T17:47:17.477

1386

To get all the elements starting with "jander" you should use:

$("[id^=jander]")

To get those that end with "jander"

$("[id$=jander]")

See also the JQuery documentation

edited Jul 08 '12 at 17:47

answered Mar 21 '11 at 10:35

nico

50,859
17
87
112

28

The docs give this example: `$('input[name^="news"]').val('news here!')` – Brenden Oct 17 '11 at 09:55

score 133 · Answer 2 · edited Sep 07 '16 at 09:10

133

Since the title suggests wildcard you could also use this:

$(document).ready(function(){
  console.log($('[id*=ander]'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jander1"></div>
<div id="jander2"></div>

This will select the given string anywhere in the id.

edited Sep 07 '16 at 09:10

Al Foиce ѫ

4,195
12
39
49

answered Jan 02 '13 at 16:08

Martijn Smidt

1,604
1
10
10

score 42 · Answer 3 · edited Aug 09 '17 at 13:24

42

Try the jQuery starts-with

selector, '^=', eg

[id^="jander"]

I have to ask though, why don't you want to do this using classes?

edited Aug 09 '17 at 13:24

Ajay2707

5,690
6
40
58

answered Mar 21 '11 at 10:38

GoatInTheMachine

3,583
3
25
35

Thanks for the classes hint, that brought me to the right direction! – gratinierer May 02 '22 at 16:50

score 38 · Answer 4 · edited Sep 25 '13 at 13:55

38

for classes you can use:

div[class^="jander"]

edited Sep 25 '13 at 13:55

joshuahedlund

1,722
2
20
25

answered Jun 26 '12 at 17:51

l3thal

562
6
11

score 16 · Answer 5 · edited Aug 09 '17 at 13:25

16

To get the id from the wildcard match:

$('[id^=pick_]').click(
  function(event) {

    // Do something with the id # here: 
    alert('Picked: '+ event.target.id.slice(5));

  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pick_1">moo1</div>
<div id="pick_2">moo2</div>
<div id="pick_3">moo3</div>

edited Aug 09 '17 at 13:25

Ajay2707

5,690
6
40
58

answered Jun 17 '13 at 23:02

PJ Brunet

3,615
40
37

score 12 · Answer 6 · edited Aug 29 '13 at 09:16

12

When you have a more complex id string the double quotes are mandatory.

For example if you have an id like this: id="2.2", the correct way to access it is: $('input[id="2.2"]')

As much as possible use the double quotes, for safety reasons.

edited Aug 29 '13 at 09:16

Simon M

2,931
2
22
37

answered Aug 29 '13 at 08:51

eduard

121
1
2

Wildcards in jQuery selectors

6 Answers6

Linked

Related