Select an element when the class name starts with a certain word

Question

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"?

Answer 1

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

Answer 2

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

Answer 3

You can do it like this:

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

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

Answer 4

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"