jQuery check if class exists or has more than one class

Question

I have a class js-bootstrap3 that is generated by a cms. What I need to do is check if the containing element just has js-bootstrap3 and .unwrap() the contents, but if the element has multiple classes which include js-bootstrap3 then I'm trying to just remove that class.

jsFiddle

$('.jsn-bootstrap3').each(function(){
    if( $(this).attr('class') !== undefined && $(this).attr('class').match(/jsn-bootstrap3/) ) {
        console.log("match");
        $(this).contents().unwrap();
        $(this).removeClass('jsn-bootstrap3');
    }
});

This just seems to detect any element with js-bootstrap3 as a class and unwraps it.

Answer 1

this.className is a string with all of the classes for the element (space delimited), so if it's not just "jsn-bootstrap3" you know it has more than one class:

$('.jsn-bootstrap3').each(function(){
    if( $.trim(this.className) !== "jsn-bootstrap3") {
        // Just jsn-bootstrap3
        $(this).contents().unwrap();
    } else {
        // More than just jsn-bootstarp3
        $(this).removeClass('jsn-bootstrap3');
    }
});

Answer 2

Dependeing on the browsers you need to support element.classlist (IE10+) might or might not be what you need.

classList returns a token list of the class attribute of the element.

classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className. It contains the following methods:

Otherwise you're looking at splitting the className into an array like so to count the values:

var classes = element.className.split(" ");

Building on your example you could do something liket his:

$('.jsn-bootstrap3').each(function(i, el){
    if( el.className.indexOf('jsn-bootstrap3') != -1 ) {
        console.log("match");
        if ( el.className.split(" ").length > 1 ) {
            $(this).removeClass('jsn-bootstrap3');
        } else {
            $(this).contents().unwrap();
        }
    }
});

Answer 3

Try this code.

$(document).ready(function(){

    $('.jsn-bootstrap3').each(function(){

        var classes = $(this).attr('class');

        var new_cls = classes.split(' ');

        if( new_cls.length > 1 ){

            $(this).removeClass('jsn-bootstrap3');

        } else {

            $(this).contents().unwrap();

        }

    });

});