jQuery - chiết xuất từ ​​tên lớp đó bắt đầu với 'tiền tố

Question

mục của tôi có các lớp sau:

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

Tôi đang tự hỏi nếu có một cách dễ dàng để:

1. Grab chỉ tất cả các lớp với tiền tố some-class-.
2. Xóa chúng khỏi từng phần tử.
3. Tên của chúng (không phải là các phần tử DOM tương ứng) trong một biến?

Tôi có thể dễ dàng chọn các thành phần như vậy với jQuery("div[class^='some-class-'], div[class*=' some-class-']") nhưng cách đặt tên lớp với mã ngắn nhất và dễ đọc nhất có thể đọc được (có thể là đối tượng toàn cục)?

Answer 1

Như thế này?

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

Fiddle

.removeClass() chấp nhận một chức năng gọi lại để làm một số hoạt động và trả lại className phải được loại bỏ, nếu không có gì phải được loại bỏ lợi nhuận gì cả.

Answer 2

Bạn có thể lặp qua tất cả các yếu tố, kéo tên lớp sử dụng một biểu thức chính quy, và lưu trữ chúng trong một mảng:

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

Demo: http://jsfiddle.net/vUWpQ/1/

Answer 3

Cách dễ dàng

Bạn cần tạo bộ lọc của riêng mình:

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

Bạn có thể lặp qua từng nút tìm thấy và lặp qua các lớp để tìm kết quả phù hợp; nếu tìm thấy, loại bỏ các lớp và đăng nhập nó:

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

Lưu ý rằng một selector như div[class*="some-class-"] là khá tốn kém và kể từ khi bạn cần phải thực hiện thêm chế biến dù sao, nó sẽ dễ dàng hơn để chỉ lặp khắp div thẻ và xử lý chúng :

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

Trình duyệt hiện tại phơi bày Element.classList mà bạn có thể sử dụng để thao tác tên lớp và Array.forEach cho lặp:

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