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

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>