Target elements by class prefix
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/
精彩评论