怎么判断当前是否有某个class，如果没有则添加class?

Question

判断当前元素是否有某个class，有就不添加，没有就添加当前class

Answer 1

if($('div').is('.class')){
    $('div').addClass('class');
}

Answer 2

我看你打了jQuery标签，直接用jQuery好了，至于判断的事情jQuery已经帮你做了，自己再判断一次没有任何意义：

jQueryObject.addClass('classname');

Answer 3

Jquery 的话

$("p").toggleClass("red");//就可以实现有就移除。没有就添加

Answer 4

应该是没有才添加，要加个取反

if(! $('div').is('.class')){
    $('div').addClass('class');
}

Answer 5

if($('body').hasClass('classname')){

$('body').removeClass('classname')

}else{

$('body').addClass('classname')

}

有classname就移除，没有就添加一个classname

Answer 6

HTML5新增的APIclassList方法中有contains()判断，以及add()和remove()方法添加和删除类。toggle()方法则是有则删除无则添加， 如果单纯实现该功能应该是不用jQuery的。

可看张鑫旭这篇博客：HTML5 DOM元素类名相关操作API classList简介

Answer 7

$("button").click(function(){
  if(!$("p:first").hasClass("intro")){
       $("p:first").addClass("intro")
  }
});

Answer 8

如果是javascript的话,

if (!p.classList.contains('classname')) {
    p.className += ' ' + 'classname';
}

更新

p.classList.add('classname');

p.classList能够列出所有class，add方法新增一个类，存在则忽略，不存在则添加。

Answer 9

Jquery的ToggleClass方法就可以实习类添加移出

Answer 10

toggleClass

Answer 11

请使用hasClass

Answer 12

结合上面总结了一下，我想出来的只有这几种：

function addClass0(targetEle, filterClassName){
    var target = document.getElementById(targetEle);
    var isExist = target && target.className.split('').indexOf(filterClassName)!=-1;
    if(!isExist){
        target.className = target.className + ' ' + filterClassName;
    }
}

function addClass(targetEle, filterClassName){
    var target = document.getElementById(targetEle);
    if(!target.classList.contains('add')){
         target.classList.add('add');
    }
}

function addClass1(targetEle, filterClassName){
     if(!$(targetEle).is('.'+filterClassName)){
         $(targetEle).addClass(filterClassName);
     }
}

function addClass2(targetEle, filterClassName){
     if(!$(targetEle).hasClass(filterClassName)){
          $(targetEle).addClass(filterClassName);
     }
}

function addClass3(targetEle, filterClassName){
     $(targetEle).not('.'+filterClassName).addClass(filterClassName);
}

function addClass4(targetEle, filterClassName){
     $(targetEle+':not(.'+filterClassName+')').addClass(filterClassName);
}

function addClass5(targetEle, filterClassName){
    $(targetEle).toggleClass(filterClassName);
}

Answer 13

网友们的分享挺好的，我再补充一个给JQuery扩充exist()方法。
在页面<script>部分复制如下代码即可。

//扩展jQuery方法用于检测DOM节点是否存在
    (function ($) {
        $.fn.exist = function () {
            return $(this).length >=1?true:false;
        }
    })(jQuery);

使用方法：
$("#id .class").exist();
这个方法可以检测div或class都行。