如何使用jQuery向DOM对象添加重复的类？

Question

可以说我有一个元素

<a class="Foo Bar" />

而且我想添加一个重复的类，因此在编写此代码时：

$('.Bar').addClass('Foo');

未添加该类，因为该元素已经有一个。

我想编写如下代码：

$('.Bar').addClassForcebly('Foo'); // Fake method, only for example.

我期望得到以下结果：

<a class="Foo Bar Foo" />

我试图使用jQuery的addClass方法的重载：

$('.Bar').addClass(function(i, c) {
    return c + ' Foo';
});

但这也不起作用。 它只是不添加重复的类。 我怎么做？

---

这个问题的重点很简单：我想让我的HTML元素能够被禁用和启用多次。 如果我两次“禁用”一个元素（添加两个相同的类），那么我也应该两次“禁用”它，以使我的逻辑起作用。

Answer 1

我看不到它的任何使用，但是您可以通过使用each（）之类的方法来实现

$('.Bar').each(function(){
   this.className = "Foo" + this.className;
});

或者，您可以使用具有回调函数的attr（attributeName，function（index，attr））重载。

$( ".Bar" ).attr( "class", function( i, val ) {
  return "Foo" + val ;
});

Answer 2

假设它是唯一的锚点，并且您已经添加了“ Foo Bar”

var myAnchor = document.getElementsByTagName("a")[0];
myAnchor.className += " Foo";

Answer 3

我认为jQuery在使用addClass添加类时会检查重复项，您可以使用

$('.Bar').each(function(i, e) {

  e.attr('class', e.attr('class') + ' Foo');

});

Answer 4

对于您指定的用途，我认为您最好的选择应该是一个包含被禁用次数的类。

第一次添加“禁用”类。

如果某个元素已经“禁用”，则添加“ disabled2”类（或将“ disabled”替换为“ disabled2”），等等。

重新启用时，请执行相反的操作。

您可以使用[class ^ =“ disabled”] CSS3选择器来匹配要添加的所有disable *类，而无需在CSS中明确指定它们。

Answer 5

“如果我两次'禁用'一个元素（添加两个相同的类），那么我也应该两次'启用'它，以使我的逻辑起作用。”

您可以创建自己的插件来跟踪添加类的次数，如下所示：

(function($) {
    $.fn.addClassWithCount = function (className) {
        return this.each(function() {
            var $this = $(this),
                count = $this.data("disable-count-" + className) + 1 || 1;
            $this.data("disable-count-" + className, count);
            $this.addClass(className);
        });
    };
    $.fn.removeClassWithCount = function (className) {
        return this.each(function() {
            var $this = $(this),
                count = $this.data("disable-count-" + className) - 1 || 0;
            if (count < 0) count = 0;
            $this.data("disable-count-" + className, count);
            if (count === 0)
                $this.removeClass(className);            
        });
    };
})(jQuery);

然后像标准.addClass()和.removeClass() ：

$("someSelector").addClassWithCount("someClass");

演示： http ： //jsfiddle.net/Sve9Q/2/

请注意，以上内容只是我为使您大致了解而快速拼凑而成的内容，因此显然可以对其进行修饰，并使其更可靠。

Answer 6

请检查下面的代码

$(function(){
    alert($(".Bar").attr("class"));

    $(".Bar").attr("class",($(".Bar").attr("class") + ' Foo'));

    alert($(".Bar").attr("class"));

});

您可以检查以下链接

http://jsfiddle.net/GS43e/