jquery - 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 element that the class starts 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(/tab/);
}).css('color', 'red');

jsFiddle Demo