使用jQuery确定元素是否具有CSS类

2020/10/23 07:21 · javascript ·  · 0评论

我正在使用jQuery,以查看是否有一种简单的方法来确定该元素是否具有与之关联的特定CSS类。

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

使用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:

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快!

为了帮助落地但实际上正在寻找jQuery的免费方式的人:

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

检查官方jQuery FAQ页面:

如何测试元素是否具有垂直类

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

就我而言,我使用了“ is”一个jQuery函数,添加了一个HTML元素,并添加了不同的css类,我在这些中间寻找了一个特定的类,因此我使用了“ 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();
    }
本文地址:http://javascript.askforanswer.com/shiyongjqueryquedingyuansushifoujuyoucsslei.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!