복붙노트

[JQUERY] jQuery를 removeClass 와일드 카드

JQUERY

jQuery를 removeClass 와일드 카드

해결법


  1. 1.removeClass 함수 jQuery를 1.4 보낸 함수 인수 걸린다.

    removeClass 함수 jQuery를 1.4 보낸 함수 인수 걸린다.

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

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


  2. 2.

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

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

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

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

  4. 4.내가 인수로 정규 표현식을 취하는 jQuery 플러그인에이 일반화했습니다.

    내가 인수로 정규 표현식을 취하는 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-/)
    

    나는 <9 IE에 존재하지 않는 Array.filter 기능을 사용하고 있습니다. 이 WTFPL 하나 같은 polyfill 대신 또는 Google 밑줄의 필터 기능을 사용할 수 있습니다.


  5. 5.당신이 다른 곳에서 사용하려면 나는 당신에게 연장을 제안한다. 이 사람은 나를 위해 잘 작동합니다.

    당신이 다른 곳에서 사용하려면 나는 당신에게 연장을 제안한다. 이 사람은 나를 위해 잘 작동합니다.

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

    용법:

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

  6. 6.우리는 ( "클래스") .attr 모든 클래스를 얻고, 배열, 그리고 루프 및 필터 할 수 있습니다 :

    우리는 ( "클래스") .attr 모든 클래스를 얻고, 배열, 그리고 루프 및 필터 할 수 있습니다 :

    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/


  7. 7.@ tremby의 대답과 마찬가지로, 여기에 접두사 나 접미사 중 하나와 일치하는 플러그인으로 코비의 대답 @입니다.

    @ tremby의 대답과 마찬가지로, 여기에 접두사 나 접미사 중 하나와 일치하는 플러그인으로 코비의 대답 @입니다.

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


  8. 8.시작과 함께 시작하는 모든 클래스를 제거 일반적인 기능 :

    시작과 함께 시작하는 모든 클래스를 제거 일반적인 기능 :

    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은 = '색 -'시작; 함수 removeClassStartingWith (노드 시작) { node.removeClass (기능 (인덱스, 클래스 명) { 창 (className.match (새 정규식 ( "\\ B"+는 + 시작 "\\ S +", "g")) || [])에 가입 ( '.'); }); } removeClassStartingWith ($ ( '#의 안녕하세요'), '색 -'); CONSOLE.LOG ($ ( "#의 인사") [0] .ClassName과); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">


  9. 9.JQuery와이 시도 플러그인

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

  10. 10.ARS81의 답변에 따라 여기에, (즉 단지로 시작하는 클래스 이름과 일치)보다 유연한 버전입니다. 또한 hasClass () 정규식 버전.

    ARS81의 답변에 따라 여기에, (즉 단지로 시작하는 클래스 이름과 일치)보다 유연한 버전입니다. 또한 hasClass () 정규식 버전.

    용도 :. $ ( '. 선택기')가 removeClassRegex ( '\\ * -foo S는 [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;
    };
    

  11. 11.이것은 효과적으로 노드의 클래스 속성에서 접두사로 시작하는 모든 클래스 이름을 제거합니다. 기타 답변 (이 글을 쓰는 현재) SVG 요소를 지원하지 않지만,이 솔루션을 수행합니다

    이것은 효과적으로 노드의 클래스 속성에서 접두사로 시작하는 모든 클래스 이름을 제거합니다. 기타 답변 (이 글을 쓰는 현재) 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, ''));
        });
    };
    

  12. 12.저도 같은 문제를 가지고와 사용 밑줄의 _.filter 방법이 다음과 함께했다. 나는 removeClass 함수를 취하고 클래스 이름의 목록을 제공한다는 것을 발견하면, 그것은 removeClass 방법으로 다시 돌아 클래스 명 밖으로 배열 및 필터에 그것을 설정하는 쉬웠다.

    저도 같은 문제를 가지고와 사용 밑줄의 _.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;
    });
    

  13. 13.또한 Element.classList를 사용하여 바닐라 자바 ​​스크립트를 사용하여이 작업을 수행 할 수 있습니다. 중 정규 표현식을 사용하는 필요 없음 :

    또한 Element.classList를 사용하여 바닐라 자바 ​​스크립트를 사용하여이 작업을 수행 할 수 있습니다. 중 정규 표현식을 사용하는 필요 없음 :

    함수 removeColorClasses (요소) { 대한 (하자 Array.from의 클래스 명 (element.classList)) 경우 (className.startsWith ( "색상 -")) element.classList.remove (클래스 명); }

    참고 : classList 클래스가 제거로 업데이트됩니다 라이브 DomTokenList 때문에 중요합니다 우리가 시작하기 전에 classList의 배열의 복사본을 만드는 것이주의.


  14. 14.또한 요소의 DOM 객체의 클래스 속성을 사용할 수 있습니다 :

    또한 요소의 DOM 객체의 클래스 속성을 사용할 수 있습니다 :

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

  15. 15.이 문제를 접근하는 또 다른 방법은 독특한 자연입니다 데이터 속성을 사용하는 것입니다.

    이 문제를 접근하는 또 다른 방법은 독특한 자연입니다 데이터 속성을 사용하는 것입니다.

    당신은 같은 요소의 색상 설정 것 : $ el.attr를 ( '데이터 컬러', '빨간색');

    [데이터 색 = "빨강"] {색상 : 그리고 당신은 같은 CSS에서 스타일을 것 토마토; }

    이것은 이전 클래스를 제거하는 필요의 부작용을 가지고있는 클래스를 사용에 대한 필요성을 부정한다.


  16. 16.B \ 단어 경계에 정규식 분할이 최상의 솔루션되지 않습니다 :

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

  17. 17.당신이 '의 클래스를 제거하기 위해 두 개 이상의 요소 클래스 이름'예 '를 갖는이있는 경우 색상 'in 그들 모두 당신이 할 수 있습니다 : [이용하여 jQuery를]

    당신이 '의 클래스를 제거하기 위해 두 개 이상의 요소 클래스 이름'예 '를 갖는이있는 경우 색상 'in 그들 모두 당신이 할 수 있습니다 : [이용하여 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을 -] - 이름에 '* 정규식에서 숫자 또는 일부를 가지고있는 클래스를 제거하지 않습니다.


  18. 18.당신은 단지 마지막 세트 색상을 제거해야하는 경우, 다음이 당신을 맞게 수 있습니다.

    당신은 단지 마지막 세트 색상을 제거해야하는 경우, 다음이 당신을 맞게 수 있습니다.

    내 상황에서, 나는 클릭 이벤트에 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 질문 무엇인지 정확히되지 않을 수 있습니다.

  19. from https://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard by cc-by-sa and MIT license