CODEWITHSUNDEEP
javascriptjqueryhtmldetection
Dustin
Dustin

Reputation: 4459

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

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?

Upvotes: 3

Views: 12338

Answers (6)

David Thomas
David Thomas

Reputation: 253506

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:

Upvotes: 6

musefan
musefan

Reputation: 48465

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

Upvotes: 4

xdazz
xdazz

Reputation: 160973

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

Upvotes: 0

Christoffer
Christoffer

Reputation: 2125

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

Upvotes: 0

aki
aki

Reputation: 709

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

Upvotes: 1

Th0rndike
Th0rndike

Reputation: 3436

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

Upvotes: 0

Related Questions