确定一个元素是否有一个带 jQuery 的 CSS 类

我正在使用 jQuery，想看看是否有一种简单的方法来确定元素是否有一个特定的 CSS 类与之相关联。

我得到了元素的 id 和我要查找的 CSS 类。我只需要能够在 if 语句中基于元素上该类的存在进行比较。

153714 次浏览
小开
最佳答案

使用 hasClass方法:

jQueryCollection.hasClass(className);

或者

$(selector).hasClass(className);

这个参数(显然)是一个字符串，表示您正在检查的类，并且它返回一个布尔值(因此它不支持像大多数 jQuery 方法那样的链接)。

注意: 如果传递一个包含空格的 className参数，它将逐字地与集合元素的 className字符串匹配。例如，如果你有一个元素,

<span class="foo bar" />

这将返回 true:

$('span').hasClass('foo bar')

这些将返回 false:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')
小开

从 常见问题

elem = $("#elemid");
if (elem.is (".class")) {
// whatever
}

或:

elem = $("#elemid");
if (elem.hasClass ("class")) {
// whatever
}
小开

至于否定式，如果你想知道一个元素是否没有类，你可以简单地像 Mark 说的那样做。

if (!currentPage.parent().hasClass('home')) { do what you want }
小开

查看官方的 jQuery FAQ 页面:

如何测试元素是否具有特定的类

小开

没有 jQuery:

var hasclass=!!(' '+elem.className+' ').indexOf(' check_class ')+1;

或者:

function hasClass(e,c){
return e&&(e instanceof HTMLElement)&&!!((' '+e.className+' ').indexOf(' '+c+' ')+1);
}
/*example of usage*/
var has_class_medium=hasClass(document.getElementsByTagName('input')[0],'medium');

这比 jQuery 快多了！

小开 
 $('.segment-name').click(function () {
if($(this).hasClass('segment-a')){
//class exist
}
});
小开

在我的例子中，我使用了“ is”一个 jQuery 函数，我添加了一个带有不同 css 类的 HTML 元素，我在这些元素中间寻找一个特定的类，所以我使用“ is”一个很好的替代方法来检查一个动态添加到 HTML 元素的类，它已经有了其他 css 类，这是另一个很好的替代方法。

简单的例子: 

 <!--element html-->
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>


<!--jQuery "is"-->
$('#menu').is('.cbp-spmenu-open');

高级示例: 

 <!--element html-->
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>


<!--jQuery "is"-->
if($('#menu').is('.cbp-spmenu-bottom.cbp-spmenu-open')){
$("#menu").show();
}
小开

为了帮助那些在这里登陆但实际上正在寻找一种免费的 jQuery 方式的人:

element.classList.contains('your-class-name')

提交答案