jQuery: Abfragen, ob ein Element eine Klasse mit Präfix hat

[Bert]

Hallo,

man kann ja über die jQuery-Funktion .hasClass ( ... ) einfach ermitteln, ob ein Element eine best. Klasse zugewiesen bekommen hat. In unserem speziellen Fall soll es jetzt darum gehen, zu ermitteln, ob ein Element eine Klasse mit einem best. Präfix zugewiesen bekommen hat und diese Klasse dann ermitteln.

Pseudo( ! )-Code:

  
var elementId = '';  
  
if ( $( 'element' ).hasClass ( 'id-\*' ) )  
{  
     elementId = $( 'element' ).getClassName ( 'id-\*' );  
}  
  

(Hintergrund: Im Endeffekt gehts hierbei drum, einen Workaround dafür zu schaffen, dass eine von uns eingesetzte, ziemlich komplexe UI-Komponente (von Fremdentwicklern, kein eigener Code) keine ID-Zuweisungen, dafür Klassen-Zuweisungen unterstützt.
Welche Klasse Auskunft über die ID erteilt, würde man dann am Präfix erkennen, sofern sich das einigermaßen direkt ermitteln lässt. Die ID wäre demnach das, was nach dem Präfix kommt. ;)
Die ID wiederum wird gebraucht, um Nodes identifizieren zu können, relevant z.B. für Drag & Drop-Geschichten.)

Hat jemand einen schlanken Ansatz parat ?

Gruß Bert

[molily]

Hallo,

jQuery bietet nichts Fertiges dafür, aber mit ein paar Zeilen JavaScript lässt sich das lösen. Zum Beispiel so:

1. Hole alle Klassen, d.h. den Wert des class-Attributs
2. Wandle diese Liste von durch Whitespace getrennten Klassennamen in einen Array um
3. Durchlaufe diesen Array
4. Prüfe jede Klasse, ob sie mit 'id-' beginnt
5. Falls ja, breche die Schleife ab, die gesuchte Klasse ist gefunden
6. Extrahiere ggf. die ID hinter dem Präfix

Tipps zur Umsetzung:

Zu 1. attr
Zu 2. http://de.selfhtml.org/javascript/objekte/string.htm#split@title=split
Zu 3. http://de.selfhtml.org/javascript/sprache/schleifen.htm#for@title=for-Schleife
Zu 4. http://de.selfhtml.org/javascript/objekte/string.htm#index_of@title=indexOf
Zu 5. http://de.selfhtml.org/javascript/sprache/schleifen.htm#break_continue@title=break
Zu 6. http://de.selfhtml.org/javascript/objekte/string.htm#substring@title=substring

Mathias

[Bert]

Hallo Mathias, werden diesen Ansatz heute umsetzen, danke für die Inspiration! ;)

1. Hole alle Klassen, d.h. den Wert des class-Attributs
2. Wandle diese Liste von durch Whitespace getrennten Klassennamen in einen Array um
3. Durchlaufe diesen Array
4. Prüfe jede Klasse, ob sie mit 'id-' beginnt
5. Falls ja, breche die Schleife ab, die gesuchte Klasse ist gefunden
6. Extrahiere ggf. die ID hinter dem Präfix

Tipps zur Umsetzung:

Zu 1. attr
Zu 2. http://de.selfhtml.org/javascript/objekte/string.htm#split@title=split
Zu 3. http://de.selfhtml.org/javascript/sprache/schleifen.htm#for@title=for-Schleife
Zu 4. http://de.selfhtml.org/javascript/objekte/string.htm#index_of@title=indexOf
Zu 5. http://de.selfhtml.org/javascript/sprache/schleifen.htm#break_continue@title=break
Zu 6. http://de.selfhtml.org/javascript/objekte/string.htm#substring@title=substring

[ChrisB]

Hi,

Hat jemand einen schlanken Ansatz parat ?

Mathias’ Vorschlag wäre eine Möglichkeit – eine andere wäre ein kleiner regulärer Ausdruck:

var elementId;  
if( elementId = $("element").attr("class").match(/((^|\s)id-([\S]+))/) ) {  
  elementId = elementId[3];  
} else {  
  elementId = null;  
}

Der Ausdruck verlangt, dass "id-" entweder direkt am Anfang des Inhaltes des class-Attributes steht, oder dass das davor beliebiger Whitespace steht; und direkt dahinter dann noch ein oder mehr beliebige nicht-Whitespace-Zeichen folgen.
Wenn dieser Ausdruck einen Treffer landet, liefert er ein Array mit Teiltreffern zurück - der vierte Eintrag in diesem Array ist der gesuchte Teil hinter "id-".
Wenn kein Treffer gefunden wurde, wird elementId explizit auf null gesetzt.
(Sollten mehrere id-… im class-Attribut drinstehen, liefert es nur den Wert des ersten.)

Die Variable elementId habe ich hier gleich als „Empfänger“ für die Rückgabe von String.match benutzt – das ist vielleicht am falschen Ende gespart. Wenn du das Konstrukt mehrfach brauchst, solltest du es in eine Funktion auslagern, der du einen jQuery-Elementwrapper übergibst, und darin eine lokale Variable für diesen Zweck nutzen.

Und teste es bitte ausreichend in den Browser-Versionen, in denen du das ganze brauchst – vor allem ältere IE haben was reguläre Ausdrücke angeht IIRC einige Bugs/Merkwürdigkeiten gehabt, über die man manchmal schön stolpern kann.

MfG ChrisB

[suit]

Hat jemand einen schlanken Ansatz parat ?

Attribut-Selektor?

element[class|=id]

Selektiert alle elemente des Typs "element" die ein Class-Attribut haben, welches in einer bindestrichgetrennten Liste mit "id" beginnt (oder exakt "id"[1]) entspricht.

Entweder verstehe ich die Frage falsch oder molily und ChrisB leiden heute an hochgradiger geistiger Umnachtung :)

[1] Wenn das nicht reicht, kann man noch mit :not([class=id]) weiter verfeinern.