如何檢查元素是否具有指定類以外的類？

Question

我有兩個動態應用於鼠標事件元素的類，比如它們是：

classOne和classTwo

如何檢查接收鼠標事件的元素是否具有除這兩個之外的類？

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>
    <span class="classOne otherClass">Element</span>
    <span class="classTwo otherClass">Element</span>
</div>

Answer 1

這個怎么樣：

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

收到一些反饋后，這是首選方式：

演示： 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

我猜你是在這之后：

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

小提琴。

Answer 3

這個想法很簡單：抓取class屬性，提取類名並將它們與白名單進行比較：

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

具有classOne或classTwo以外的類的元素將classTwo紅色：

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

如果此類型有多個元素，則可以使用.each()

Answer 6

這是解決方案。 鼠標懸停時觸發腳本。

 <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>

不要忘記包含js庫。

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

演示
更新

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

更新的演示