我有几个带有“project [0-9]”类的div:
<div class="project1"></div>
<div class="project2"></div>
<div class="project3"></div>
<div class="project4"></div>
我想检查元素是否有“project [0-9]”类。我有.hasClass("project")
,但我坚持使用匹配的数字。
任何的想法?
我有几个带有“project [0-9]”类的div:
<div class="project1"></div>
<div class="project2"></div>
<div class="project3"></div>
<div class="project4"></div>
我想检查元素是否有“project [0-9]”类。我有.hasClass("project")
,但我坚持使用匹配的数字。
任何的想法?
您可以使用startswith CSS3 选择器来获取这些 div:
$('div[class^="project"]')
要检查一个特定元素,您可以使用.is()
,而不是hasClass
:
$el.is('[class^="project"]')
要使用确切的/project\d/
正则表达式,您可以查看jQuery 选择器正则表达式或使用
/(^|\s)project\d(\s|$)/.test($el.attr("class"))
对您的 html 更好的方法是:我相信这些 div 具有一些共同的属性。
<div class="project type1"></div>
<div class="project type2"></div>
<div class="project type3"></div>
<div class="project type4"></div>
然后您可以使用以下方法找到它们:
$('.project')
$('div[class*="project"]')
不会因为这样的事情而失败:
<div class="some-other-class project1"></div>
$('div[class^="project"]')
将失败,如下所示:
<div class="some-other-class project1"></div>
这是扩展 jQuery 的替代方法:
// Select elements by testing each value of each element's attribute `attr` for `pattern`.
jQuery.fn.hasAttrLike = function(attr, pattern) {
pattern = new RegExp(pattern)
return this.filter(function(idx) {
var elAttr = $(this).attr(attr);
if(!elAttr) return false;
var values = elAttr.split(/\s/);
var hasAttrLike = false;
$.each(values, function(idx, value) {
if(pattern.test(value)) {
hasAttrLike = true;
return false;
}
return true;
});
return hasAttrLike;
});
};
jQuery('div').hasAttrLike('class', 'project[0-9]')
来自 sandinmyjoints:https ://github.com/sandinmyjoints/jquery-has-attr-like/blob/master/jquery.hasAttrLike.js (但它有错误,所以我修复了它)
您可以改进现有hasClass
方法:
// This is all that you need:
(orig => {
jQuery.fn.hasClass = function(className) {
return className instanceof RegExp
? this.attr('class') && this.attr('class')
.split(/\s+/)
.findIndex(name => className.test(name)) >= 0
: orig.call(this, className);
}
})(jQuery.fn.hasClass);
// Test the new method:
Boolean.prototype.toString = function(){ this === true ? 'true' : 'false' };
const el = $('#test');
el.append("hasClass('some-name-27822'): " + el.hasClass('some-name-27822'));
el.append("\nhasClass(/some-name-\d+/): " + el.hasClass(/some-name-\d+/));
el.append("\nhasClass('anothercoolclass'): " + el.hasClass('anothercoolclass'));
el.append("\nhasClass(/anothercoolclass/i): " + el.hasClass(/anothercoolclass/i));
el.append("\nhasClass(/^-name-/): " + el.hasClass(/^-name-/));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="test" class="some-name-0 some-name-27822 another-some-name-111 AnotherCoolClass"></pre>
为什么不使用 for 来检查数字
for (var i = 0; i < 10; i++) {
if(....hasClass("project"+i))
{
//do what you need
}
}