jQuery: How to check if two elements have the same class

Question

Is there a way to check if two elements have the same class name? My code looks like this...

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

What I want to do is add another class to the foo link if it matches a class in the body. How would I check if one of the classes in my links matches a class in the body with jQuery?

possible duplicate: http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery — Peter, Mar 07 '12 at 15:01
if ($('selector').hasClass('foo')) alert('i have class foo, wohoo'); — ggzone, Mar 07 '12 at 15:02
You should use [.hasClass()](http://api.jquery.com/hasClass/) — phemios, Mar 07 '12 at 15:01

David Thomas · Accepted Answer · 2012-03-07T16:07:24.903

I'd suggest:

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

Edited to try and account for Internet Explorer's inability to understand/use/implement .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.

Edited because it appears my previous attempt, to account for IE, failed. Sigh. Still! This approach should work, albeit I can't test it, as I'm without both IE and 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.

References:

Thanks for the update to fix IE. It was broke in Firefox too. — Dustin, Mar 26 '12 at 21:09

musefan · Answer 2 · 2012-03-07T15:26:08.080

4

ok, assuming I understand you correctly, you can do something like this...

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

As you can see I have used the hasClass() JQuery function to check if the body tab has the matching class.

If your link will potentially have more than one class name you can do it like this...

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

Also, if you want to process all your links at the same time you could wrap it all in a JQuery each() and change the first line like so...

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

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

edited Mar 07 '12 at 15:26

answered Mar 07 '12 at 15:03

musefan

47,875
21
135
185

What about the link has multiple classes? – xdazz Mar 07 '12 at 15:10
1

@xdazz: Apparently you didn't read this part of the linked documentation: "The .hasClass() method will return true if the class is assigned to an element, even if other classes also are." – Piskvor left the building Mar 07 '12 at 15:14
@xdazz: The it becomes a different question. html/javascript can change so much it is pointless trying to cater for "what if's". Always better to code to your current requirements and keep the javascript as clean as possible – musefan Mar 07 '12 at 15:15
1

@Piskvor You didn't understand my mean. I mean if link has multiple classes, `link.attr("class")` will return something like `foo foo1 foo2`, so does `.hasClass()` work? – xdazz Mar 07 '12 at 15:16
1

@xdazz: I probably didn't. `link.hasClass("foo1")` would still return `true` in your example (which is what the documentation says, as quoted above). Is that what you're asking? – Piskvor left the building Mar 07 '12 at 15:20

score 1 · Answer 3 · answered Mar 07 '12 at 15:02

1

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

answered Mar 07 '12 at 15:02

aki

699
7
25

score 0 · Answer 4 · answered Mar 07 '12 at 15:01

0

using jquery hasClass() method will lead you to a solution

answered Mar 07 '12 at 15:01

Th0rndike

3,406
3
22
42

score 0 · Answer 5 · answered Mar 07 '12 at 15:02

0

Here is one suggestion, there might be others (that are better) as well :)

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

answered Mar 07 '12 at 15:02

Christoffer

2,125
15
21

score 0 · Answer 6 · answered Mar 07 '12 at 15:04

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

answered Mar 07 '12 at 15:04

xdazz

158,678
38
247
274

jQuery: How to check if two elements have the same class

6 Answers6

Linked