jQuery를 - 추출 클래스 이름은 접두사 '로 시작하는'

Question

내 항목에 다음과 같은 클래스가 : 쉬운 방법이 있는지 궁금 해요

<div class="class-x some-class-1 other-class"></div> 
<div class="some-class-45 class-y"></div> 
<div class="some-class-123 something-else"></div> 

을에 :

1. 잡아에만 모든 클래스 접두사는 some-class-입니다.
2. 각 요소에서 제거하십시오.
3. 변수에 이름 (해당 DOM 요소 아님)이 있습니까?

내가 쉽게 jQuery("div[class^='some-class-'], div[class*=' some-class-']")하지만 클래스 이름이 변수에 짧고 가장 읽을 수있는 코드로 추출 할 수있는 방법 (일부 전역 객체 일 수있다)와 같은 요소를 선택할 수 있습니까?

Answer 1

좋아요?

Fiddle

.removeClass()

var arrClasses = []; 
$("div[class*='some-class-']").removeClass(function() { // Select the element divs which has class that starts with some-class- 
    var className = this.className.match(/some-class-\d+/); //get a match to match the pattern some-class-somenumber and extract that classname 
    if (className) { 
     arrClasses.push(className[0]); //if it is the one then push it to array 
     return className[0]; //return it for removal 
    } 
}); 
console.log(arrClasses); 

어떤 작업을하고 아무것도 반환 아무것도 제거되지 할 경우, 제거 할 클래스 명을 반환하는 콜백 함수를 사용할 수 있습니다.

Answer 2

당신은 모든 요소를 ​​통해 루프, 정규 표현식을 사용하여 클래스 이름을 당겨와 배열에 저장할 수 :

var classNames = []; 
$('div[class*="some-class-"]').each(function(i, el){ 
    var name = (el.className.match(/(^|\s)(some\-class\-[^\s]*)/) || [,,''])[2]; 
    if(name){ 
     classNames.push(name); 
     $(el).removeClass(name); 
    } 
}); 

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

Answer 3

쉬운 방법

자신 만의 필터를 만들 수 있습니다 :

$.fn.hasClassStartsWith = function(className) { 
    return this.filter('[class^=\''+className+'\'], [class*=\''+className+'\']'); 
} 

var divs = $('div').hasClassStartsWith("some-class-"); 
console.log(divs.get()); 

See fiddle

Answer 4

발견 된 각 노드를 반복하고 클래스를 반복하여 일치하는 항목을 찾을 수 있습니다. 발견하는 경우, 클래스를 제거하고 로그 :

var found = []; 

$('div[class*="some-class-"]').each(function() { 
    var classes = this.className.split(/\s+/), 
    $this = $(this); 

    $.each(classes, function(i, name) { 
     if (name.indexOf('some-class-') === 0) { 
      $this.removeClass(name); 
      found.push(name); 
     } 
    }); 
}); 

참고 div[class*="some-class-"] 같은 선택 꽤 비싼 것을 당신이 어떻게 든 추가 처리를 수행 할 필요가 있기 때문에, 그냥 모든 div 태그를 반복하고이를 처리하기 쉬울 것 :

var elements = document.getElementsByTagName('div'), 
found = []; 

$.each(elements, function(i, element) { 
    var classes = element.className.split(/\s+/); 

    $.each(classes, function(i, name) { 
     if (name.indexOf('some-class-') === 0) { 
      $(element).removeClass(name); 
      found.push(name); 
     } 
    }); 
}); 

현대 브라우저는 반복에 대해 당신이 클래스 이름을 조작하는 데 사용할 수있는 Element.classList 및 Array.forEach 노출 :

var found = []; 

[].forEach.call(document.getElementsByTagName('div'), function(element) { 
    (function(names, i) { 
     while (i < names.length) { 
      var name = names[i]; 
      if (name.indexOf('some-class-') === 0) { 
       names.remove(name); 
       found.push(name); 
      } else { 
       ++i; 
      } 
     } 
    }(element.classList, 0)); 
});