How to check if element has classes other than the specified classes?

Question

I have two classes which are dynamically applied to element on mouse event, say they are:

classOne and classTwo

How to check if the element which is receiving the mouse event has classes other than those two?

HTML Example:

<div>
    <span class="classOne classTwo">Element</span>
    <span class="classOne">Element</span>
    <span class="classTwo">Element</span>
    <span class="classOne classTwo otherClass">Element</span>
    <span class="classOne otherClass">Element</span>
    <span class="classTwo otherClass">Element</span>
</div>

Answer 1

How about this:

 $('body').on('mouseover', 'span', function(){
    var spanclasses = $(this).attr('class').replace('classOne', '').replace('classTwo', '').trim();
    if(spanclasses.length)
    {
        alert('there is another class');
    }else{  
        alert('there is no other classes');
    }
 });

UPDATE

After receiving some feedback, here is the preferred way:

Demo: https://jsfiddle.net/a8vkkqox/

 $('body').on('mouseover', 'span', function(){
      var span = $(this).clone().removeClass('classOne').removeClass('classTwo');
      if(span.attr('class').length)
      {
          alert('there is another class');
      }else{  
          alert('there is no other classes');
      }
 });

Answer 2

I guess you are after this:

var classes = ["classOne", "classTwo"];
$('div span').on('click', function (e) {
    var thisArray = this.classList;
    console.log(thisArray);
    $.each(thisArray, function (i, klas) {
        if ($.inArray(klas, classes) == -1) {
            alert('this element has the extra class.' + klas);
        }
    });
});

Fiddle.

Answer 3

The idea is simple: grab the class attribute, extract class names and compare them against the whitelist:

 $(function() { var whitelist = ["classOne", "classTwo"]; $("span").each(function() { var $this = $(this); var classNames = $this.attr("class").trim().split(/\\s+/); var classOther = $.grep(classNames, function(className) { return $.inArray(className, whitelist) === -1; }); if (classOther.length) { $this.css("border", "thick solid red"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div> <span class="classOne classTwo">Element</span> <span class="classOne">Element</span> <span class="classTwo">Element</span> <span class="classOne classTwo otherClass">Element</span> <span class="classOne otherClass">Element</span> <span class="classTwo otherClass">Element</span> <span class="classOne classTwo classOneclassTwo">Element</span> <span class="classOne classOne">Element</span> </div> 

Answer 4

The element with class other than classOne or classTwo will get red:

 $('span').each(function() { var that = $(this); var classArr = that.attr('class').split(' '); for (i=0;i<classArr.length;i++) { if (classArr[i].indexOf('classOne') == -1 && classArr[i].indexOf('classTwo') == -1) { that.addClass('otherClass'); } } }); 

 .otherClass { color:red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <span class="classOne classTwo">Element</span> <span class="classOne">Element</span> <span class="classTwo">Element</span> <span class="classOne classTwo otherClass">Element</span> </div> 

Answer 5

$(document).on('mouseover', '.classOne.classTwo', function(){
    $(this).each(function(){
      var cls=$(this).attr("class").split(" ");
      if(cls.length>2) {
         alert(cls.length);
      }
    });
});

DEMO

If there are more than one element for this type you can use .each()

Answer 6

Here is solution. Script is triggered on mousehover.

 <script>
 $(document).ready(function () {
  $("span").hover(function () {
   if ($(this).hasClass('otherClass')) {
     // do something 
     alert("otherClass");
   }
  });
});
</script>

html

 <div>
 <span class="classOne classTwo">Element</span>
 <span class="classOne">Element</span>
 <span class="classTwo">Element</span>
 <span class="classOne classTwo otherClass">Element</span>
 </div>

Don't forget to include js library.

Answer 7

$('div > span').click(function(){
    var foo = $(this).attr('class');
    foo = foo.split(' ');
    var classOne = foo.indexOf("classOne");
    var classTwo = foo.indexOf("classTwo");
    if(classOne != -1 && classTwo != -1){
        alert('Both classes found');
    }
    else if(classOne != -1 && classTwo == -1){
        alert('classOne found');
    }
    else if(classOne == -1 && classTwo != -1){
        alert('classTwo found');
    }
    else{
        alert('none of classe found');
    }
});  

Demo
updated

$('div > span').click(function(){
        var foo = $(this).attr('class');
        foo = foo.split(' ');
        var otherClass= foo.indexOf("otherClass");

        if(otherClass!= -1){
            alert('has otherClass');
        }

        else{
            alert('has no otherClass');
        }
});  

updated demo