jQuery：如何检查两个元素是否具有相同的类

Question

jQuery：如何检查两个元素是否具有相同的类

3

有没有一种方法可以检查两个元素是否具有相同的类名？我的代码如下...

<body class="foo bar cats">
<a href="#" class="foo">Link</a>
<a href="#" class="puppies">Link</a>

我想做的是，如果链接中有一个与body中的类匹配，就添加另一个类到foo链接上。我该如何使用jQuery检查我的链接中的类是否与body中的类匹配？

- Dustin

可能重复：https://dev59.com/bHM_5IYBdhLWcg3wymY0 - Peter

你应该使用.hasClass()。 - phemios

1

如果 ($('selector').hasClass('foo')) alert('我有类foo，哇呼'); - ggzone

6个回答

4

好的，如果我理解正确，您可以这样做...

var link = $(".foo");//or select your link another way
var linkClass = link.attr("class");
if($("body").hasClass(linkClass)){
   //link has matching class
   link.addClass("newClass");
}

正如您所看到的，我使用了hasClass() JQuery函数来检查body标签是否具有匹配的类。

如果您的链接可能具有多个类名，可以这样做...

var link = $(".foo");//or select your link another way
var linkClass = link.attr("class");
var classList = linkClass.split(/\s+/);

var matchFound = false;

for(var i = 0; i < classList.length; i++){
    if($("body").hasClass(classList[i])){
       //link has matching class
       matchFound = true;
    }
}

if(matchFound){
    link.addClass("newClass");
}

此外，如果您想同时处理所有链接，您可以将其全部包装在JQuery each()中，并将第一行更改为以下内容...

$("a").each(function(index){
   var link = $(this);

   //the rest of the above code here
});

- musefan

链接有多个类怎么办？ - xdazz

1

@xdazz：显然你没有阅读链接文档的这部分内容：“如果该类被分配给一个元素，即使还有其他类，.hasClass()方法也会返回true。” - Piskvor left the building

@xdazz：那就是另一个问题了。HTML/JavaScript 可以变化很多，试图迎合“假设情况”是没有意义的。最好根据当前需求编写代码，并尽可能保持 JavaScript 的简洁。 - musefan

1

@Piskvor，你没有理解我的意思。我的意思是如果链接有多个类，link.attr("class") 将返回类似于 foo foo1 foo2 的内容，那么 .hasClass() 能起作用吗？ - xdazz

1

@xdazz：我可能没有。在你的例子中，link.hasClass("foo1")仍然会返回true（这正是文档所说的，如上所引用）。这是你想问的吗？ - Piskvor left the building

1

$('a').hasClass('foo').addClass('whatever');

- aki

0

这里有一个建议，可能还有其他更好的选择 :)

$(document).ready(function() {
    var $foo = $('.foo'); // select the foo link
    if ($(body).hasClass($foo.attr('class'))) {
        $foo.addClass('anotherClass');
    }
});

- Christoffer

0

var body_classes =$('body').attr('class').split(/\s+/);
var foo_link = $('a.foo');
$.each(body_classes, function(index, item){
    if (foo_link.hasClass(item)) {
       foo_link.addClass('class_you_want_to_add');
       return false; 
    }
});

- xdazz

0

使用 jQuery 的 hasClass() 方法将带您找到解决方案。

- Th0rndike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Thomas · Accepted Answer

我建议：

：

$('a').each(
    function() {
        var classes = this.classList;
        for (var i=0,len=classes.length; i<len; i++){
            if ($('body').hasClass(classes[i])){
                $(this).addClass('bodySharesClass');
            }
        }
    });

JS Fiddle演示。

编辑以尝试解决Internet Explorer无法理解/使用/实现.classList的问题：

if (!document.createElement().classList){
    var useAttr = true;
}

$('a').each(
    function(i) {
        var classes = [];
        if (!useAttr){            
            classes = this.classList;
        }
        else {
            classes = $(this).attr('class');
        }
        for (var i=0,len=classes.length; i<len; i++){
            if ($('body').hasClass(classes[i])){
                $(this).addClass('bodySharesClass');
            }
        }
    });

JS Fiddle演示。

编辑因为我之前的尝试，考虑到IE，已经失败了。唉。但是！这个方法应该有效，尽管我无法测试它，因为我没有IE和Windows:

$('a').each(
    function(i) {
        var classes = this.className.split(/\s+/);
        for (var i=0,len=classes.length; i<len; i++){
            if ($('body').hasClass(classes[i])){
                $(this).addClass('bodySharesClass');
            }
        }
    });

JS Fiddle演示。

参考资料：

classList。
hasClass()。