Question

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

示例：

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

我想在这个元素中只有一个类，如下所示：

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

我已经尝试过但没有成功。感谢

Answer 1

您可以使用removeClass()删除现有课程，然后使用addClass()添加一个课程，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

更新（根据评论）

您可以扩展jQuery函数名称空间，如下所示，以获得更通用的解决方案，该解决方案迭代jquery对象并消除任何重复的类名：

＆＃13;

(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");

＆＃13;

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

＆＃13;

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

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

3 个答案: