159

How can I select all elements whose id starts with "player_"?

I have multiple elements like this:

<div id="player_290x3dfda">text</div>

Every id has a unique stamp on it. How can I select all those elements, either with jQuery or with pure CSS?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
matt
  • 42,713
  • 103
  • 264
  • 397

4 Answers4

261

Normally you would select IDs using the ID selector #, but for more complex matches you can use the attribute-starts-with selector (as a jQuery selector, or as a CSS3 selector):

div[id^="player_"]

If you are able to modify that HTML, however, you should add a class to your player divs then target that class. You'll lose the additional specificity offered by ID selectors anyway, as attribute selectors share the same specificity as class selectors. Plus, just using a class makes things much simpler.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Is this selector in CSS works on older browsers like ie8 and ie9, and if not what the alternative? – Jim Sep 19 '13 at 07:08
  • It's very compatible - check out quirksmode: http://www.quirksmode.org/css/selectors/#link3 – doub1ejack Feb 25 '14 at 17:51
  • what if you don't know the type of html element? like it could be an input, or select, etc. – And Wan Jul 13 '17 at 14:44
  • @And Wan: Then leave out the type selector. It's not required. – BoltClock Jul 13 '17 at 14:45
  • Using a class for functionality is a bad practice! CSS is for styling! What if the class names changed because new styles were implemented? Then all of your functions would break! – Raqem Nov 11 '21 at 21:08
  • @Raqem: https://blog.novalistic.com/archives/2018/01/using-css-selectors-for-non-css/#attributes https://stackoverflow.com/questions/18701670/can-i-use-non-existing-css-classes/18701712#18701712 – BoltClock Nov 14 '21 at 13:56
97

try this:

$('div[id^="player_"]')
Prakash
  • 6,562
  • 3
  • 25
  • 33
  • This should be the answer. It shows how to actually implement the solution in code. Thanks, Prakash! – KWallace Apr 05 '17 at 21:42
25

You can use meta characters like * (http://api.jquery.com/category/selectors/). So I think you just can use $('#player_*').

In your case you could also try the "Attribute starts with" selector: http://api.jquery.com/attribute-starts-with-selector/: $('div[id^="player_"]')

Taz
  • 3,718
  • 2
  • 37
  • 59
Timon
  • 376
  • 2
  • 6
  • 1
    Actually I believe that you can't use *$('#prefix\*')*. At least I don't get it to work... – Konrad Viltersten Jun 06 '14 at 14:35
  • 1
    This doesn't work for me (in Chrome). – rept Nov 05 '14 at 23:48
  • Well I think you don't understand what the documentation says: To use any of the meta-characters ( such as `!"#$%&'()*+,./:;<=>?@[\]^\`{|}~` ) _**as a literal part of a name**_, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector `$("#foo\\.bar")` – Vinicius Monteiro Jan 13 '16 at 15:44
4
$('div[id ^= "player_"]');

This worked for me..select all Div starts with "players_" keyword and display it.

Riddhi
  • 202
  • 5
  • 17