Как добавить дублирующий класс к объекту DOM с помощью jQuery?

Question

Допустим, у меня есть элемент

<a class="Foo Bar" /> 

И я хочу, чтобы добавить дубликат класс, так как я закодировать это:

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

Класс не добавляется, потому что элемент уже есть.

Я хочу, чтобы закодировать что-то вроде этого:

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

И я ожидаю, что следующий результат:

<a class="Foo Bar Foo" /> 

Я пытался использовать перегрузку addClass метода, в JQuery в:

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

Но это тоже не работает. Он просто не добавляет повторяющийся класс. Как мне это сделать?

---

Суть этого вопрос довольно прост: я хочу, чтобы мои HTML элементы были в состоянии быть отключено и включены Mulitple раз. Если я дважды отключу элемент (добавив два одинаковых класса), я должен «включить» его дважды, чтобы моя логика работала.

Answer 1

"Если я 'отключить' элемент дважды (добавление двух одинаковых классов) я должен" включите «это дважды, чтобы моя логика работала».

Вы можете создать свой собственный плагин, который отслеживает, сколько раз был добавлен класс, что-то вроде этого:

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

Я не вижу использовать его, но вы можете сделать это, то, как с помощью each()

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

ИЛИ, вы можете использовать attr(attributeName, function(index, attr)) перегрузку, которая имеет функцию обратного вызова.

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

Answer 3

позволяет говорить о его единственный якорь, и у вас уже есть это «Foo Bar» добавил

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

Answer 4

Я думаю, что Jquery проверяет дубликаты при добавлении классов с addClass, вы могли бы просто использовать

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

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

}); 

Answer 5

Для использования Вами, я считаю, что ваш лучший выбор должен быть классом, который включает в себя количество отключений.

Первый раз, когда вы добавляете класс 'disabled'.

Если элемент уже «отключен» вы добавляете класс «disabled2» (или заменить «отключено» с «disabled2») и т.д. ...

При повторном что позволяет сделать наоборот.

Вы можете использовать селектор CSS3 [class^= "disabled"] для соответствия всем отключенным * классам, которые вы хотите добавить, без указания их явно в вашем CSS.

Answer 6

Пожалуйста, проверьте ниже код

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

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

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

}); 

Вы можете проверить ссылку ниже

http://jsfiddle.net/GS43e/