判断一个元素是不是有一个带有 jQ​​uery 的 CSS 类

Posted 2023-03-06

【中文标题】判断一个元素是不是有一个带有 jQ​​uery 的 CSS 类

【英文标题】：Determine if an element has a CSS class with jQuery判断一个元素是否有一个带有 jQ​​uery 的 CSS 类

【发布时间】：2010-09-20 18:21:31

【问题描述】：

我正在使用 jQuery，并希望了解是否有一种简单的方法可以确定元素是否具有与之关联的特定 CSS 类。

我有元素的 ID，以及我正在寻找的 CSS 类。我只需要能够在 if 语句中根据元素上该类的存在进行比较。

【问题讨论】：

如果你想不用 jQuery，“hasClass” with javascript?

【参考方案1】：

为了帮助那些来到这里但实际上正在寻找一种免费的 jQuery 方法的人：

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

【参考方案2】：

在我的例子中，我使用了 '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();
    

【参考方案3】：

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

【参考方案4】：

没有 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 快得多！

【讨论】：

你为什么要做...&&!!((' '+e.classname+' ').indexOf(' '+c+' ')+1)，而不仅仅是&&!(' '+e.classname+' ').indexOf(' '+c+' ')？

因为indexOf 返回-1 是该类不存在。如果我做!!-1，那将是true。因为我在做!!-1+1，所以这将是错误的。更好的方法是...&&!!~(' '+e.className+' ').indexOf(' '+c+' ')，但我当时不记得了。

对不起，我的意思是...&&~(' '+e.className+' ').indexOf(' '+c+' ')

【参考方案5】：

查看官方 jQuery FAQ 页面：

How do I test whether an element has perticular class or not

【参考方案6】：

使用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')

【讨论】：

我不同意。文档按类别组织，但您也可以轻松地按字母顺序查看所有方法。一切都带有一个示例，而 cmets 部分通常会清除所有遗漏的内容。 jQuery 有很多优秀的功能和实用程序，需要一些学习才能发现它们。 -EDIT- 这是有道理的，它肯定已经走了很长一段路。

@Trafalmadorian，由于情况发生了变化，我删除了我原来的评论。最初您在 -EDIT- 之前发布了所有内容，我回复说我对文档质量的评论不再相关，而是参考了他们之前的 (MediaWiki) 系统。然后，您删除了之前的评论并使用 -EDIT- 进行了回复。我希望这次清理对未来的读者来说更清晰一些，更少误导。

@daniloquio，如果你直接访问 api.jquery.com ...由于某种原因，该网站仍然链接到 docs.jquery.com 上的糟糕 wiki 版本

【参考方案7】：

至于否定，如果你想知道一个元素是否没有类，你可以按照 Mark 说的做。

if (!currentPage.parent().hasClass('home'))  do what you want 

【参考方案8】：

来自FAQ

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

或：

elem = $("#elemid");
if (elem.hasClass ("class")) 
   // whatever

【讨论】：

小心 .is() - “如果当前集合中的任何元素与基于 is 的集合中的任何元素匹配，jQuery 中的 is() 方法将返回 true” - @987654322 @