Suppose I have the elements as below:

<div class="home">
  <div class="tab231891230"></div>
  <div class="tab121232441"></div>
  <div class="tab123134545"><开发者_JAVA百科;/div>
</div>

How can I use jQuery to select the div elements that have the class starting with "tab"?

---

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

---

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

---

You can do it like this:

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

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

---

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"

---

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/