37

Suppose I have the elements as below:

<div class="home">
    <div class="tab231891230"></div>
    <div class="tab121232441"></div>
    <div class="tab123134545"></div>
</div>

How can I use jQuery to select the div element that the class starts with "tab"?

Heretic Monkey
  • 11,078
  • 7
  • 55
  • 112
Charles Yeung
  • 37,627
  • 28
  • 87
  • 130
  • 2
    Just a general comment about classes vs. ids: classes should broadly match a "class" of multiple items and ids should match specific items. In general "tab1234567" is something specific, which means you should use an "id" and not a class. But sometimes you don't have a choice if the code is already written :-) – PJ Brunet Jan 20 '15 at 22:34

5 Answers5

65

It is called the Attribute Starts With Selector. My example sets a red text color on the elements:

$('[class^="tab"]').css('color', 'red');

jsFiddle Demo

Please note that if the elements have more than one class and the other precedes the one with tab inside (class="nyedva tab231891230") the element won't be selected by this selector.

If you want to select even these, you can use this example:

$('.home div').filter(function () {
    return this.className.match(/\btab/);
}).css('color', 'red');

jsFiddle Demo

kapa
  • 75,446
  • 20
  • 155
  • 173
46

If you have multiple class inside one element, use this to select

$("[class*='tab']");

It will work with element like this

<div class="home">
<div class="module tab231891230"></div>
<div class="module tab121232441"></div>
<div class="module tab123134545"></div>

Reference : jquery attribute-contains selector

cyberfly
  • 5,330
  • 8
  • 46
  • 62
  • 5
    Be aware that this will also select classes like `timetable`, resulting in "strange" bugs. – kapa Feb 22 '16 at 09:14
11

You can do it like this:

$('div[class^="tab"]');

See http://api.jquery.com/attribute-starts-with-selector/

Tim
  • 5,773
  • 3
  • 33
  • 62
  • I'm afraid that actually won't work because there's a typo (I've just blindly copied it and got 'unrecognized expression' error message). There's one too many equals sign, and the correct syntax is: $('div[class^="tab"]'); – Alex Sanséau Aug 31 '15 at 12:34
0

The proper way to select a class with a known prefix:

[class^="tab"], [class*=" tab"]

PS: Use the same even if you just need a CSS selector!

the above will make sure to target both cases: "tab123 xyz" but also "xyz tab123"

Use a safe delimiter

If possible, introduce a safe delimiter like dash - i.e: "tab-123 xyz", "xyz tab-123"
Than your selector is much safer [class^="tab-"], [class*=" tab-"]

Roko C. Buljan
  • 180,066
  • 36
  • 283
  • 292
-3

why use that? that number, you can assign to rel or id attribute, like this:

<div class="home">
    <div class="tab" rel="231891230"></div>
    <div class="tab" rel="121232441"></div>
    <div class="tab" rel="123134545"></div>
</div>

then it will be accessible at:

$('div.tab').click(yourhandler);

or even, add a subclass of that current "tab" class:

<div class="home">
    <div class="tab 231891230"></div>
    <div class="tab 121232441"></div>
    <div class="tab 123134545"></div>
</div>

then, just select by "tab" class like in the jQuery example above, and do whatever you want with the second class (check if it's there, remove it).

check these:

http://api.jquery.com/class-selector/

http://api.jquery.com/hasClass/

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

metaforce
  • 1,297
  • 5
  • 17
  • 26