jQuery removeClass 와일드 카드


370

예를 들어 일치하는 모든 클래스를 제거하는 쉬운 방법이 있습니까?

color-*

그래서 요소가 있다면 :

<div id="hello" class="color-red color-brown foo bar"></div>

제거한 후에는

<div id="hello" class="foo bar"></div>

감사!


1
"허용 된 답변"과 같은 정규 표현식은 공백이 아닌 단어 경계에서 중단됩니다. 아래에 대안 솔루션을 게시했습니다. 또한보십시오 : stackoverflow.com/questions/57812/…
sarink

@KabirSarin 수락 된 답변은이 문제를 해결하기 위해 업데이트되었습니다.
Emile Bergeron

CSS 와일드 카드 surfingsuccess.com/css/…
Max Hodges

답변:


679

removeClass의 함수 보낸 함수 인수 얻어 jQuery를 1.4 .

$("#hello").removeClass (function (index, className) {
    return (className.match (/(^|\s)color-\S+/g) || []).join(' ');
});

라이브 예 : http://jsfiddle.net/xa9xS/1409/


4
나는 이것이 처음에는 시작되지 않는 일치하는 클래스의 주요 공백을 캡처 할 것이라고 주목할 가치가 있다고 생각했습니다. Javascript는 긍정적 인 룩백을 지원하지 않으므로 캡처 그룹 해결 방법을 사용해야합니다. 그러나 removeClass 함수는 다음을 통해 클래스 문자열에서 공백을 제거하기 때문입니다.classes = ( value || "" ).match( rnotwhite ) || [];
eephillip

이 솔루션이 가장 좋습니다! 두 개 이상의 클래스가 제거되었는지 어떻게 확인할 수 있습니까? 즉 sport-, nav-color-?
lowtechsun

이런 식으로 끝나는 클래스에 맞추려면 어떻게해야 *-color합니까?
Circle B

3
@lowtechsun 당신은 이렇게 정규 표현식에 추가 할 수 있습니다 (color-|sport-|nav-). color-또는 sport-, 또는와 일치 nav-합니다. 따라서 위의 대답은 /(^|\s)(color-|sport-|nav-)\S+/g입니다.
Bogie

1
허용되는 대답은 정확하지만 관용적으로 \ b를 사용하여 단어가 많은 단어 경계 (^ | \ s)가 아닌 단어 경계와 일치합니다. 예를 들어, magic이라는 단어와 음이 아닌 정수로 구성된 모든 클래스를 제거하려면 / \ bmagic \ d + \ b /와 일치시킵니다.
CarlEdman

98
$('div').attr('class', function(i, c){
    return c.replace(/(^|\s)color-\S+/g, '');
});

5
오버 헤드를 줄이고 포인트로 곧바로 도달하기 때문에 이것을 좋아합니다. attr이 작업을 더 잘 수행 할 때 클래스 제거를 사용하는 이유는 무엇입니까?
Angry Dan

2
빈 클래스 ( c is undefined) 로부터 보호해야한다고 생각 합니까? 적어도이 페이지의 플러그인 에서 아래에서 시도했을 때 $('a').stripClass('post', 1)"TypeError : 정의되지 않은 '바꾸기'메소드를 호출 할 수 없습니다"라고 던졌습니다.
drzaus

1
@ Kobi 예, 속성을 필터링하고없는 결과를 반환 할 수 있다고 생각하지 않습니다. 값이 있는지 여부에 관계없이 $('div[class]')with 만 요소를 반환해야합니다 class. 테스트 시나리오 : jsfiddle.net/drzaus/m83mv
drzaus

1
@Kobi-당신이 뭘 받고 있는지 알 것 같습니다. 가장자리와 같은 경우 .removeProp('class')또는 .className=undefined필터가 [class]여전히 무언가를 반환 하면 그냥 undefined있습니다. 따라서 기술적으로 여전히 클래스가 있습니다 (와 반대로 .removeAttr('class'), 기능이 중단되지만 내 변형은 아닙니다. jsfiddle.net/drzaus/m83mv/4
drzaus

1
빠른 테스트 추가는 저에게 효과적입니다.return c && c.replace(/\bcolor-\S+/g, '');
ssmith

50

필자는 alterClass라고하는 플러그인을 작성했습니다. 와일드 카드와 일치하는 요소 클래스를 제거하십시오. 선택적으로 클래스를 추가하십시오 : https://gist.github.com/1517285

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )

1
실로 아주 훌륭합니다. 제가 Twitter Boostrap다음과 같은 클래스 를 제거해야하는 코드를 재사용하는 데 도움 이되었습니다.$(".search div").children('div').alterClass('span* row-fluid');
Leniel Maccaferri

15

나는 이것을 정규식을 인수로 취하는 Jquery 플러그인으로 일반화했다.

커피:

$.fn.removeClassRegex = (regex) ->
  $(@).removeClass (index, classes) ->
    classes.split(/\s+/).filter (c) ->
      regex.test c
    .join ' '

자바 스크립트 :

$.fn.removeClassRegex = function(regex) {
  return $(this).removeClass(function(index, classes) {
    return classes.split(/\s+/).filter(function(c) {
      return regex.test(c);
    }).join(' ');
  });
};

따라서이 경우 사용법은 (커피와 자바 스크립트 모두)입니다.

$('#hello').removeClassRegex(/^color-/)

Array.filterIE <9에는 존재하지 않는 함수를 사용하고 있습니다. 이 WTFPL one 과 같은 폴리 에는 Underscore의 필터 기능을 대신 사용하거나 Google을 사용할 수 있습니다 .


11

다른 곳에서 사용하려면 확장 프로그램을 제안합니다. 이것은 나를 위해 잘 작동합니다.

 $.fn.removeClassStartingWith = function (filter) {
    $(this).removeClass(function (index, className) {
        return (className.match(new RegExp("\\S*" + filter + "\\S*", 'g')) || []).join(' ')
    });
    return this;
};

용법:

$(".myClass").removeClassStartingWith('color');

4

우리는 모든 클래스 .attr("class")를 Array, And Loop & Filter로 가져올 수 있습니다 .

var classArr = $("#sample").attr("class").split(" ")
$("#sample").attr("class", "")
for(var i = 0; i < classArr.length; i ++) {
    // some condition/filter
    if(classArr[i].substr(0, 5) != "color") {
        $("#sample").addClass(classArr[i]);
    }
}

데모 : http://jsfiddle.net/L2A27/1/


추가 var prefix='color';및 변경 ...if (classArr[i].substr(0, prefix.length) != prefix)
Rich C

4

@ tremby의 유사 대답 , 여기 코비의 @입니다 대답 접두사 나 접미사 중 하나와 일치하는 플러그인있다.

  • 예) 스트립 btn-minibtn-danger아닌 btn경우 stripClass("btn-").
  • 예)는 스트립 horsebtncowbtn하지만 btn-minibtnstripClass('btn', 1)

암호:

$.fn.stripClass = function (partialMatch, endOrBegin) {
    /// <summary>
    /// The way removeClass should have been implemented -- accepts a partialMatch (like "btn-") to search on and remove
    /// </summary>
    /// <param name="partialMatch">the class partial to match against, like "btn-" to match "btn-danger btn-active" but not "btn"</param>
    /// <param name="endOrBegin">omit for beginning match; provide a 'truthy' value to only find classes ending with match</param>
    /// <returns type=""></returns>
    var x = new RegExp((!endOrBegin ? "\\b" : "\\S+") + partialMatch + "\\S*", 'g');

    // https://stackoverflow.com/a/2644364/1037948
    this.attr('class', function (i, c) {
        if (!c) return; // protect against no class
        return c.replace(x, '');
    });
    return this;
};

https://gist.github.com/zaus/6734731


1
기록 상으로는 이것이 더 간단하다는 데 동의하지 않습니다.
tremby

죄송 @tremby, 난에 간단한 의미 전형적인 당신이 정규식 매번 작성하지 않기 때문에 (즉, 접두사와 접미사) 사용
drzaus

3
나는 여전히 동의하지 않습니다. 방법을 사용하면 설명서를 읽고 정확히 필요한 값을 기억 endOrBegin해야합니다. 자명하지 않습니다. 정규식을 작성하는 데 어려움이 있습니까? /^match-at-start//match-at-end$/모든 JS 현상으로 알려져있다. 그러나 각자 자신의 것.
tremby

1
구걸 정규 표현식에이 악용 될하는 것 이외의 @tremby, 비 정규식 옵션은 더 밀접하게 기존의 서명과 일치 addClass, removeClass그리고 toggleClass모든 jQuery를 개발자에게 알려져있다. 문서를 읽는 데 어려움이 있습니까? ;)
drzaus

2
@tremby가 말한 것처럼 문서를 읽는 것은 어렵지 않지만 그의 솔루션은 설명이 필요하지만 문서는 필요합니다. 자체 설명 솔루션은 정의에 따라 사용하기가 더 간단합니다.
Francisco Hodge

2

jQuery 플러그인의 경우 이것을 시도하십시오

$.fn.removeClassLike = function(name) {
    return this.removeClass(function(index, css) {
        return (css.match(new RegExp('\\b(' + name + '\\S*)\\b', 'g')) || []).join(' ');
    });
};

아니면 이거

$.fn.removeClassLike = function(name) {
    var classes = this.attr('class');
    if (classes) {
        classes = classes.replace(new RegExp('\\b' + name + '\\S*\\s?', 'g'), '').trim();
        classes ? this.attr('class', classes) : this.removeAttr('class');
    }
    return this;
};

2

ARS81 기반답변 (시작하는 클래스 이름과 만 일치)을 보다 유연한 버전이 있습니다. 또한 hasClass()정규식 버전.

용법: $('.selector').removeClassRegex('\\S*-foo[0-9]+')

$.fn.removeClassRegex = function(name) {
  return this.removeClass(function(index, css) {
    return (css.match(new RegExp('\\b(' + name + ')\\b', 'g')) || []).join(' ');
  });
};

$.fn.hasClassRegex = function(name) {
  return this.attr('class').match(new RegExp('\\b(' + name + ')\\b', 'g')) !== null;
};

2

이렇게하면 prefix노드 class속성 에서 시작하는 모든 클래스 이름이 효과적으로 제거됩니다 . 다른 답변은 SVG 요소를 지원하지 않지만 (이 글을 쓰는 현재)이 솔루션은 다음을 수행합니다.

$.fn.removeClassPrefix = function(prefix){
    var c, regex = new RegExp("(^|\\s)" + prefix + "\\S+", 'g');
    return this.each(function(){
        c = this.getAttribute('class');
        this.setAttribute('class', c.replace(regex, ''));
    });
};

RegExp각 콜백 에서 객체를 한 번 만드는 것이 더 효율적이지 않습니까?
Emile Bergeron

1
@EmileBergeron-그렇습니다! 내가 변경할 것
vsync

2

나는 같은 문제가 있었고 밑줄의 _.filter 메소드를 사용하는 다음을 생각해 냈습니다. removeClass가 함수를 사용하고 클래스 이름 목록을 제공한다는 것을 알게되면, 그것을 클래스로 바꾸고 클래스 이름을 필터링하여 removeClass 메소드로 돌아갈 수있었습니다.

// Wildcard removeClass on 'color-*'
$('[class^="color-"]').removeClass (function (index, classes) {
  var
    classesArray = classes.split(' '),
    removeClass = _.filter(classesArray, function(className){ return className.indexOf('color-') === 0; }).toString();

  return removeClass;
});

1
당신은 밑줄이 _.filter에서 무엇을 설명 할 수
바트

2

Element.classList를 사용하여 vanilla JavaScript로이 작업을 수행 할 수도 있습니다 . 정규식을 사용할 필요가 없습니다.

function removeColorClasses(element) { for (let className of Array.from(element.classList)) if (className.startsWith("color-")) element.classList.remove(className); }

참고 : 시작하기 전에 Array사본을 만듭니다 . 클래스가 제거 될 때 업데이트 되는 라이브 classList이므로 중요 합니다.classListDomTokenList


1

className요소의 DOM 객체의 속성을 사용할 수도 있습니다 .

var $hello = $('#hello');
$('#hello').attr('class', $hello.get(0).className.replace(/\bcolor-\S+/g, ''));

1

로 시작하는 클래스를 제거하는 일반 함수 begin:

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
    });
}

http://jsfiddle.net/xa9xS/2900/

var begin = 'color-';

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
    });
}

removeClassStartingWith($('#hello'), 'color-');

console.log($("#hello")[0].className);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello" class="color-red color-brown foo bar"></div>


0

단어 경계에서 정규 표현식을 나누는 \b것이 가장 적합한 해결책은 아닙니다.

var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ");

또는 jQuery 믹스 인으로 :

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = classes.join(" ");
    });
    return this;
};

0

클래스 이름이 'example'인 요소가 두 개 이상인 경우 'color-'클래스를 모두 제거하려면 다음을 수행하십시오. [using jquery]

var objs = $('html').find('.example');
for(index=0 ; index < obj1s.length ; index++){
    objs[index].className = objs[index].className.replace(/col-[a-z1-9\-]*/,'');
}

정규식에 [a-z1-9-] *를 넣지 않으면 이름에 숫자 나 '-'가있는 클래스는 제거되지 않습니다.


0

마지막 설정 색상 만 제거하면 다음이 적합 할 수 있습니다.

내 상황에서 클릭 이벤트의 body 태그에 색상 클래스를 추가하고 마지막으로 설정된 색상을 제거해야했습니다. 이 경우 현재 색을 저장 한 다음 데이터 태그를 찾아 마지막으로 설정된 색을 제거하십시오.

암호:

var colorID = 'Whatever your new color is';

var bodyTag = $('body');
var prevColor = bodyTag.data('currentColor'); // get current color
bodyTag.removeClass(prevColor);
bodyTag.addClass(colorID);
bodyTag.data('currentColor',colorID); // set the new color as current

정확히 당신이 필요로하는 것은 아니지만 나에게 이것은 이것이 내가 본 첫 번째 질문이었습니다. 그래서 누군가를 도울 수 있도록 솔루션을 공유 할 것이라고 생각했습니다.


여기서는 관련이 없습니다. SO에서 권장되는 행동이므로 자신의 질문에 대답했을 수 있습니다.
Emile Bergeron

@Emile : 맞습니다. 원래 질문에 직접 대답하지 않기 때문에 그렇게 할 수 있습니다. 이 답변을 그대로 두거나 제거해야합니까?
redfox05

그 시점에서, 그것은 당신 자신의 위험에 처해 있습니다. 따라서 위험없이 자신의 질문으로 옮길 수 있습니다. 또한 이에 대한 질문이 있는지 확인하여 중복을 피하십시오.
Emile Bergeron

0

이 문제에 접근하는 다른 방법은 본질적으로 고유 한 데이터 속성을 사용하는 것입니다.

다음과 같이 요소의 색상을 설정합니다. $el.attr('data-color', 'red');

그리고 당신은 CSS처럼 그것을 스타일링 할 것입니다 : [data-color="red"]{ color: tomato; }

이로 인해 클래스를 사용할 필요가 없어져 이전 클래스를 제거해야하는 부작용이 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.