我有几个使用类的 div
- .wrap-1-addon-1
- .wrap-2-addon-1
- .wrap-3-addon-1
我想选择所有这些并if ( $(this).hasClass() )
用来检查它是否是其中之一。目前我只检查一个类。例如,我如何检查所有这些.hasClass('wrap-*-addon-1')
?
最好的祝福。
我有几个使用类的 div
我想选择所有这些并if ( $(this).hasClass() )
用来检查它是否是其中之一。目前我只检查一个类。例如,我如何检查所有这些.hasClass('wrap-*-addon-1')
?
最好的祝福。
您可以结合两个 jquery Attribute Starts With Selector[name^=”value”]
和Attribute Ends With Selector[name$=”value”]
来完成这项工作。
$('div[class^="wrap-"][class$="-addon-1"]')
$('div[class^="wrap-"][class$="-addon-1"]').css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-1-addon-1">wrap-1-addon-1</div>
<div class="wrap-2-addon-1">wrap-2-addon-1</div>
<div class="wrap-3-addon-1">wrap-3-addon-1</div>
<div class="wrap-3-addon-2">wrap-3-addon-2</div>
您可以使用.is()
哪个支持多个类,不幸.hasClass()
的是一次只能用于一个类。
例子:
element.is('.wrap-1-addon-1, .wrap-2-addon-1, .wrap-2-addon-1')
最好添加另一个类并使用该类进行选择。然后,您可以使用正则表达式对其进行测试。
$el = $(".wrap");
$el.each(function() {
var test = /wrap-[1-3]-addon-1/.test($(this).attr("class"));
$(".result").html(test);
console.log(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-1-addon-1 wrap"></div>
<div class="wrap-2-addon-1 wrap"></div>
<div class="wrap-3-addon-1 wrap"></div>
<div class="result"></div>
从这个答案中激发正则表达式匹配:
var $ele = $("div:first");
alert(matchRule($ele.attr('class'),'wrap-*-addon-1'))
function matchRule(str, rule) {
return new RegExp("^" + rule.split("*").join(".*") + "$").test(str);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap-1-addon-1">
</div>
<div class="wrap-2-addon-1">
</div>
<div class="wrap-3-addon-1">
</div>
这可能会对您有所帮助,我使用正则表达式来解决当前元素的类是否适合所需的模式。
我假设您要检查的课程超过 3 个。此模式适用于 wrap-1-addon-1 到 wrap-n-addon-1,n 是某个数字
function hasMyClass(elm) {
var regex = /(wrap-)+(\d)+(-addon-1)/i;// this is the regex pattenr for wrap-*-addon-1
var $this = $(elm);
var myClassesStr = $this.attr('class');
if(myClassesStr) { // if this has any class
var myClasses = myClassesStr.split(' '); // split the classes
for(i=0;i<myClasses.length;i++) { // foreach class
var myClass = myClasses[i]; // take one of classes
var found = myClass.match(regex); // check if regex matches the class
if(found) {
return true;
}
}
}
return false;
}
function test() {
$('#container div').each(function(){
var $this = $(this);
$('#pTest').append('<br/>test result for ' + $this.attr('id') + ':' + hasMyClass(this));
// hasMyClass(this) is the sample usage
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1" class="wrap-1-addon-1 anotherClass">div1 (wrap-1-addon-1)</div>
<div id="div2" class="wrap-2-addon-1 anotherClass anotherClass2">div2 (wrap-2-addon-1)</div>
<div id="div3" class="wrap-3-addon-1 anotherClass">div3 (wrap-3-addon-1)</div>
<div id="div4" class="anotherClass">div4 (none)</div>
</div>
<button id="testBtn" onclick="test();" type="button">TEST</button>
<p id="pTest" >...</p>