如何删除同一元素上的重复类

Question

如何使用JQuery删除同一元素上的重复类？

例子：

<a href="#" class="foo foo">link</a> 

我只想要一个类此元素，如下图所示：

<a href="#" class="foo">link</a> 

我已经尝试过，但没有成功。由于

Answer 1

可以使用removeClass()删除现有的类，添加使用addClass()一回如下：

$("a").removeClass("foo").addClass("foo");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="foo foo">link</a>

---

更新（按照评论）

可以扩展如下图所示的更一般的解决方案，它遍历一个jQuery对象，并消除任何重复类名jQuery函数的命名空间：

(function($) { 
 
    $.fn.removeDuplicateClass = function(className) { 
 
    return this.removeClass(className).addClass(className); 
 
    }; 
 
    $.fn.removeDuplicateClasses = function() { 
 
    this.each(function (i, element) { 
 
     var arr = [], 
 
     classList = $(element).attr("class").split(" "); 
 
     $.each(classList, function (i, item) { 
 
      if (arr.indexOf(item) < 0) { 
 
       arr.push(item); 
 
       } 
 
     }); 
 
     $(this).attr("class", arr.join(" ")); 
 
    }); 
 
    return this; 
 
    }; 
 
})(jQuery); 
 

 
$("a").removeDuplicateClasses(); // or $("a").removeDuplicateClass("foo");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="#" class="foo foo">foo dup</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="bar foo bar">bar dup</a> 
 
    </li> 
 
</ul>

Answer 2

你可以得到所有类与.attr（）函数：

var element = $('a'); 
var classes = element.attr('class'); 

然后你可以分割类：

var classArray = classes.split(' '); 

之后，你可以遍历通过这些类

var temp = Array(); 
classArray.forEach(function(c){ 
    // check if not exists in temp array 
    if(temp.indexOf(c) < 0){ 
     // add to temp array 
     temp.push(c); 
    } 
    else { 
     // remove class (and add again to get it once) 
     element.removeClass(c).addClass(c); 
    } 
}); 

看这个http://jsfiddle.net/fwkj1pLz/1/的一个例子。

Answer 3

您也可以使用hasClass来检查元素是否包含您正在查找的重复类，然后删除不需要的元素并再次返回。链接Demo

<a href="#" class="foo foo">link</a> 

var elem = $('a'); 
alert(elem.attr('class')); 

if (elem.hasClass('foo foo')){ 
    elem.removeClass("foo").addClass("foo"); 
    alert(elem.attr('class')); 
}