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 elements that have the class starting with "tab"?

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Charles Yeung
  • 38,347
  • 30
  • 90
  • 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
  • 77,694
  • 21
  • 158
  • 175
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,568
  • 8
  • 50
  • 67
  • 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,893
  • 3
  • 35
  • 64
  • 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
1

First and foremost: try always to use a Safe Delimiter like - I.e: tab-something

The proper way to select class by prefix is by using a combination of two Attribute Selectors, the ^ Starts With and * Includes.

The reason being: by using only: [class^="tab-something"] such will select only class="tab-something foo bar" but not class="foo tab-something bar" elements — giving you erratic results.

Target elements by className prefix

JavaScript:

const tabs = document.querySelectorAll('[class^="tab-"], [class*=" tab-"]');

jQuery:

const $tabs = $('[class^="tab-"], [class*=" tab-"]');

CSS:

[class^="tab-"], [class*=" tab-"] {
  /* "tab-" prefixed class styles here */
}

To recap:
the above will make sure to target both "tab-aaa foo bar" and "foo tab-bbb bar"

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
-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,337
  • 5
  • 17
  • 26