jQuery - Extrakt Klassenname, dass ‚beginnt mit‘ Präfix

Question

Meine Artikel haben die folgenden Klassen:

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

Ich frage mich, ob es eine einfache Möglichkeit ist:

1. Schnappen nur alle Klassen mit some-class- Präfix.
2. Entfernen Sie sie von jedem Element.
3. Haben ihre Namen (nicht entsprechende DOM-Elemente) in einer Variablen?

ich leicht solche Elemente mit jQuery("div[class^='some-class-'], div[class*=' some-class-']") auswählen können, sondern wie seine Klassennamen mit der kürzesten und der am meisten lesbaren Code zu einer Variablen (können einige globale Objekt sein) extrahiert werden könnte?

Answer 1

Gefällt mir?

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() akzeptiert eine Callback-Funktion eine Operation und gibt den Klassennamen zu tun entfernt werden, wenn nichts Rückkehr nichts entfernt werden.

Answer 2

Sie könnten eine Schleife durch alle Elemente, ziehen Sie den Klassennamen einen regulären Ausdruck verwenden, und speichern sie in einem Array:

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

Der einfache Weg

Sie können Ihren eigenen Filter erstellen:

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

Sie können über jeden gefundenen Knoten iterieren und über die Klassen iterieren, um eine Übereinstimmung zu finden. wenn gefunden, die Klasse entfernen und melden Sie es:

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

Beachten Sie, dass ein Wähler wie div[class*="some-class-"] ziemlich teuer ist und da Sie zusätzliche Verarbeitung benötigen ohnehin durchzuführen, wäre es einfacher, nur alle div Tags iterieren und verarbeiten sie :

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

Moderne Browser belichten Element.classList, die Sie Klassennamen und Array.forEach für Iteration verwenden können, zu manipulieren:

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