jQuery Change Class

작성일 Edited on In ,

Toggle Event 사용시 AAA 로 명명된 클래스를 BBB 로 바꾸고 싶을 때가 있다.

1
$('#id').removeClass('AAA').addClass('BBB');

보통 이런 방식으로 사용하는데, alterClass 함수를 곁들이면 더 나이스하게 바꿀 수 있다.

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
@author https://gist.github.com/peteboere/1517285
*/
$.fn.alterClass = function (removals, additions) {
  var self = this;

  if (removals.indexOf('*') === -1) {
    // Use native jQuery methods if there is no wildcard matching
    self.removeClass(removals);
    return !additions ? self : self.addClass(additions);
  }

  var patt = new RegExp(
    '\\s' +
      removals.replace(/\*/g, '[A-Za-z0-9-_]+').split(' ').join('\\s|\\s') +
      '\\s',
    'g'
  );

  self.each(function (i, it) {
    var cn = ' ' + it.className + ' ';
    while (patt.test(cn)) {
      cn = cn.replace(patt, ' ');
    }
    it.className = $.trim(cn);
  });

  return !additions ? self : self.addClass(additions);
};

예제

1
2
3
4
// AAA to BBB
$('#id').alterClass('AAA', 'BBB');
// AAA-12, BBB-13 to AAABBB
$('#id').alterClass('AAA-* BBB-*', 'AAABBB');

**asterisk(*)**를 이용해 여러 개의 클래스를 한꺼번에 원하는 클래스로 변경할 수 있다.

여담

jQuery UI 를 사용 중이라면, .switchClass를 사용하면 된다.