Select an element when the class name starts with

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

You can do it like this:

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

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

Answer 2

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 3

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 4

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/