jQuery removeClass 와일드카드

jQuery removeClass 와일드카드

예를 들어, 일치하는 모든 클래스를 쉽게 제거할 수 있는 방법이 있습니까?

color-*

그래서 만약 내게 요소가 있다면,

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

제거한 후, 그것은

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

감사합니다!

removeClass 함수는 jQuery 1.4부터 함수 인수를 사용합니다.

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

실시간 예: http://jsfiddle.net/xa9xS/1409/

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

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

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

다른 곳에서 사용하고 싶다면 연장을 제안합니다.이것은 저에게 잘 맞습니다.

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

용도:

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

저는 이것을 정규식을 인수로 사용하는 Jquery 플러그인으로 일반화했습니다.

커피:

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

Javascript:

$.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-/)

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

으로 시작하는 하는 일반 입니다.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>

우리는 모든 수업을 받을 수 있습니다..attr("class")어레이, 루프 및 필터에 연결:

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/

@tremby의 답변과 유사하게 접두사 또는 접미사와 일치하는 플러그인으로서의 @Kobi의 답변이 있습니다.

• (줄무늬) 스트립btn-mini그리고.btn-danger하지만 아닙니다.btn 때에stripClass("btn-").
• (줄무늬) 스트립horsebtn그리고.cowbtn하지만 아닙니다.btn-mini또는btn 때에stripClass('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

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

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

" " ": " "라는 단어를 .Array의 classList시작하기 전에, 그것은 중요합니다.classList라이브입니다DomTokenList클래스가 제거되면 업데이트됩니다.

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

할 수 있습니다.$el.attr('data-color', 'red');

그리고 당신은 그것을 다음과 같이 CSS로 스타일링할 것입니다.[data-color="red"]{ color: tomato; }

이것은 클래스 사용의 필요성을 부정하며, 이것은 오래된 클래스를 제거해야 하는 부작용을 가지고 있습니다.

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;
};

편집: 두 번째 접근 방식은 전체 클래스 문자열에서 정규식 교체를 하나만 실행하기 때문에 조금 더 빨라야 합니다.첫 번째(짧은 길이)는 모든 기존 클래스 이름을 반복하고 지정된 정규식에 대해 하나씩 테스트하는 jQuery 자체 removeClass 메서드를 사용하므로 후드 아래에서 동일한 작업에 대해 더 많은 단계를 수행합니다.그러나 실제 사용에서는 그 차이가 미미합니다.

속도 비교 벤치마크

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;
};

이렇게 하면 다음으로 시작하는 모든 클래스 이름이 효과적으로 제거됩니다.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, ''));
    });
};

저도 같은 문제가 있었고 언더스코어의 _.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;
});

당신은 또한 사용할 수 있습니다.className요소의 DOM 개체 속성:

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

단어 경계에서 정규식 분할\b이에 대한 최선의 해결책이 아닙니다.

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

또는 jQuery mixin:

$.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;
};

클래스 이름이 'color-'인 요소가 둘 이상 있는 경우 모든 요소에서 'color-' 클래스를 제거하려면 다음 작업을 수행할 수 있습니다.[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-]*를 넣지 않으면 이름에 숫자나 '-'가 있는 클래스가 제거되지 않습니다.

마지막 세트 색상만 제거하면 다음과 같은 색상이 적합할 수 있습니다.

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

코드:

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 질문이었기 때문에, 만약 누군가에게 도움이 된다면 제 솔루션을 공유할 것이라고 생각했습니다.

언급URL : https://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard