Question

有没有办法检查两个元素是否具有相同的类名？我的代码看起来像这样......

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

我想要做的是在foo链接中添加另一个类，如果它与正文中的类匹配。我如何检查链接中的某个类是否与jQuery中的类匹配？

Answer 1

我建议：

$('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 demo

已编辑尝试解释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 demo

已编辑，因为我之前尝试使用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 demo

参考文献：

classList。
hasClass()。

Answer 2

好吧，假设我理解正确，你可以做这样的事情......

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
});

Answer 3

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

Answer 4

使用jquery hasClass（）方法将引导您找到解决方案

Answer 5

这是一个建议，也可能有其他（也更好）：）

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

Answer 6

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; 
    }
});

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

6 个答案: