클래스 속성에서 패턴과 일치하지만 다른 클래스는 유지하는 클래스를 어떻게 제거합니까?

Question

내가 모든 태그에 class 속성에서 '블루'

샘플 HTML로 끝나는 클래스를 삭제할

<p class="text_blue happy">this is blue text</p> 
<p class="text_red nothappy">this is red text</p> 
<img class="img_blue nothappy" /> 

이

'블루'로 끝나는 클래스와 함께 나에게 모든 요소를 ​​줄 것이다

$('[class$=blue]'); 

일치하는 클래스 이름을 클래스 속성에서 팝하는 방법은 무엇입니까?

Answer 1

은이 같은 정규 표현식 전체 클래스 이름을 당길 수 : 당신이 깨달아야한다

$('[class$="blue"]').each(function() { 
    var clsName = this.className.match(/\w*blue\w*/)[0]; 
}); 

한 가지 $('[class$="blue"]')이 class라는 이름의 전체 속성에서 작동한다는 것입니다. 개별 클래스 이름에 대해서는 작동하지 않습니다. 그것은 일치하지 않습니다,

class="happy text_blue" 

을 :하지만 그래서, 그것은 일치하는 클래스 속성이 "blue"으로 끝나지 않는

class="text_blue happy" 

때문이다. 당신은 더 클래스 이름 끝나지 않았다 필터링하고 싶다면

$('[class*="blue"]').each(function() { 
    var clsName = this.className.match(/\w*blue\w*/)[0]; 
}); 

: 당신이이 클래스 이름 속성에 배치되는 위치에 관계없이 "blue"가 포함 된 클래스 이름을 얻고 싶은 경우에, 당신은 사용하는 것 파란색으로,이 같은 JS으로 그렇게 할 수 있습니다 :

$('[class*="blue"]').each(function() { 
    var match = this.className.match(/\w*blue(\b|$)/); 
    if (match) { 
     var clsName = match[0]; 
    } 
}); 

을 당신이 객체에서 이러한 클래스 이름을 제거하려면 다음과 같이 그것을 할 수 :

$('[class*="blue"]').each(function() { 
    var match = this.className.match(/\w*blue(\b|$)/); 
    if (match) { 
     $(this).removeClass(match[0]); 
    } 
}); 

또한 조금 청소기 것 같다 이런 식으로 할 수 있지만, 그것은 완벽하게 제거 할 것 클래스 이름 주위에 여분의 공백을 정리하지 않습니다 내가 익숙해있어

$('[class*="blue"]').each(function() { 
    this.className = this.className.replace(/\w*blue(\b|$)/, "").replace(/\s+/g, ' '); 
}); 

Answer 2

이 작업을 많이 수행하려는 경우 클래스 할당 방법을 변경할 수 있습니다.

<p class="text blue happy">this is blue text</p> 

을하고 대신 CSS에 .text_blue의 선택기를 사용하는 대신 .text.blue를 사용 :이처럼 HTML을 만들 수 있습니다. 그런 다음 클래스에서 "파란색"을 간단히 제거 할 수 있습니다.