jQuery - özü sınıf adı bu önek 'ile başlar'

Question

My ürün aşağıdaki sınıfları: kolay bir yol olup olmadığını merak ediyorum

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

için:

1. tut yalnızca tüm sınıfları some-class- önekiyle.
2. Onları her öğeden kaldırın.
3. Bir değişkene kendi adlarını (karşılık gelen DOM öğelerini) sahip mi?

kolayca jQuery("div[class^='some-class-'], div[class*=' some-class-']") ama onun sınıf adı bir değişkene en kısa ve en okunabilir kod ile çıkarılan olabilir nasıl (bazı küresel nesne olabilir) bu tür öğeleri seçebilirsiniz?

Answer 1

Bunu beğendiniz mi?

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

bazı operasyon yapmak ve hiçbir şey geri dönüş şey kaldırılacak olursa, kaldırılacak ClassName dönmek için bir geri çağırma işlevi kabul eder.

Answer 2

tüm unsurları aracılığıyla döngü, normal bir ifade kullanarak sınıf adını çekin ve onları bir diziye depolayabilir:

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

kolay yolu

Kendi filtrenizi oluşturmalısınız:

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

Bulunan her düğümün üzerinde yineleme yapabilir ve bir eşleşme bulmak için sınıfların üzerinde yineleyebilirsiniz; bulursa, sınıf çıkarıp log:

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

Not div[class*="some-class-"] gibi bir seçici oldukça pahalı olduğunu ve yine ekstra işleme gerçekleştirmek için gereken zamandan beri, sadece her div etiketlerini yineleme ve bunları işlemek için daha kolay olurdu :

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

Modern tarayıcılar yineleme için sınıf isimleri işlemek için kullanabileceği Element.classList ve Array.forEach maruz:

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