jQuery hasClass () - sucht nach mehr als einer Klasse

162

Mit:

if(element.hasClass("class"))

Ich kann nach einer Klasse suchen, aber gibt es eine einfache Möglichkeit zu überprüfen, ob "Element" eine von vielen Klassen hat?

Ich benutze:

if(element.hasClass("class") || element.hasClass("class") ... )

Was nicht schlecht ist, aber ich denke an etwas wie:

if(element.hasClass("class", "class2")

Was leider nicht funktioniert.

Gibt es so etwas?

Hans
quelle

Antworten:

227

Wie wäre es mit:

element.is('.class1, .class2')
Matchu
quelle
9
Nein, denn das würde nach Elementen suchen, die beide Klassen haben. Ich denke, Marcel sucht nach Elementen mit einer oder mehreren Klassen.
Giles Van Gruisen
Gerade erst bemerkt, dass ich dort 4 id = "hallo" Elemente habe. Feste Version, um Validatoren glücklich zu machen: jsbin.com/uqoku/2/edit
Matchu
1
@Matchu Ich hatte das gleiche Problem mit, .hasClass()aber Ihre Lösung scheint den Trick getan zu haben, danke
Nasir
11
Dies funktionierte nicht für mich, aber $('element').is('.class1.class2')tat
iamchriswick
6
@iamchriswick: Das ist etwas anders als das, wonach OP gefragt hat. .class1.class2werden Elemente übereinstimmen, haben die beiden Klassen, aber sie für Elemente suchen , die passen entweder Klasse.
Matchu
291
element.is('.class1, .class2')

funktioniert, aber es ist 35% langsamer als

element.hasClass('class1') || element.hasClass('class2')

Geben Sie hier die Bildbeschreibung ein

Wenn Sie Zweifel haben, was ich sage, können Sie auf jsperf.com überprüfen .

Hoffe das hilft jemandem.

Simon Arnold
quelle
16
19% langsamer, große Sache. Programmierer sind teurer.
Nowaker
21
@DamianNowak Wenn diese Programmierer nicht bereit sind zu schreiben, was einer unbedeutenden Menge an mehr Code entspricht, sind sie wahrscheinlich nicht sehr teuer.
Akkuma
2
... ähm, aber ich habe dies gerade in jsperf für Chrome 21.0.1180 ausgeführt und die is () -Methode ist jetzt ungefähr 20% schneller. Aber die hasClass () scheint besser lesbar zu sein.
Danyal Aytekin
3
@psychobrm: Wenn Sie 10 Klassen gleichzeitig überprüfen müssen, müssen Sie Ihre Klassennamen wirklich optimieren. Es gibt keinen Grund für solchen Unsinn. :)
CHao
5
Ich persönlich kann die Notwendigkeit einer Leistungsoptimierung nicht erkennen. 12000 Operationen pro Sekunde scheinen mir schnell genug zu sein. Ich würde sagen, verwenden Sie, was für Sie besser aussieht. Optimieren Sie die Leistung bei Bedarf.
3Dom
38
$.fn.extend({
    hasClasses: function (selectors) {
        var self = this;
        for (var i in selectors) {
            if ($(self).hasClass(selectors[i])) 
                return true;
        }
        return false;
    }
});

$('#element').hasClasses(['class1', 'class2', 'class3']);

Dies sollte es tun, einfach und leicht.

Kalel Wade
quelle
2
Sie vermissen eine Variable im for (i in Selektoren) und erstellen so eine globale.
Gremwell
4
Ein kleiner Punkt, aber die Parameter- Selektoren sollten eigentlich Klassen oder Klassennamen heißen , da Sie diese übergeben und keine Selektoren. Selektoren würden einen Punkt vor sich haben, wie in $ ('# element'). HasClasses (['. Class1', '.class2', '.class3']);
24.
10

filter () ist eine weitere Option

Reduzieren Sie den Satz übereinstimmender Elemente auf diejenigen, die dem Selektor entsprechen, oder bestehen Sie den Funktionstest.

$(selector).filter('.class1, .class2'); //Filter elements: class1 OR class2

$(selector).filter('.class1.class2'); // Filter elements: class1 AND class2
John Magnolia
quelle
6

Wie wäre es damit?

if (element.hasClass("class1 class2")
Robert Łoziński
quelle
3
Dies funktioniert nicht, wenn Sie eine ODER-Bedingung betrachten.
Jason Conville
4

Hier ist eine Antwort, die der Syntax von folgt

$(element).hasAnyOfClasses("class1","class2","class3")
(function($){
    $.fn.hasAnyOfClasses = function(){
        for(var i= 0, il=arguments.length; i<il; i++){
            if($self.hasClass(arguments[i])) return true;
        }
        return false;
    }
})(jQuery);

Es ist nicht das schnellste, aber es ist eindeutig und die Lösung, die ich bevorzuge. Bank: http://jsperf.com/hasclasstest/10

Henrik Myntti
quelle
Error: $self is not defined
Bagofmilch
1
@bagofmilk Meine Antwort wurde von anderen bearbeitet, seit ich sie vor 6 Jahren geschrieben habe. Da ich jQuery seit Jahren nicht mehr verwendet habe, weiß ich nicht genau, was mit der Bearbeitung beabsichtigt war, aber ursprünglich hatte ich var $self = $(this);kurz vor der for-Schleife
Henrik Myntti
1

Was ist damit?

$.fn.extend({
     hasClasses: function( selector ) {
        var classNamesRegex = new RegExp("( " + selector.replace(/ +/g,"").replace(/,/g, " | ") + " )"),
            rclass = /[\n\t\r]/g,
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && classNamesRegex.test((" " + this[i].className + " ").replace(rclass, " "))) {
                return true;
            }
        }
        return false;
    }
});

Einfach zu verwenden,

if ( $("selector").hasClasses("class1, class2, class3") ) {
  //Yes It does
}

Und es scheint schneller zu sein, http://jsperf.com/hasclasstest/7

Okan Kocyigit
quelle
1

Wie wäre es mit:

if($('.class.class2.class3').length > 0){
    //...
}
u01jmg3
quelle
3
Das brauchst du nicht > 0. Wenn die Länge nicht Null ist, wird true zurückgegeben.
Isaac Lubow
1

jQuery

if( ['class', 'class2'].some(c => [...element[0].classList].includes(c)) )

Vanilla JS

if( ['class', 'class2'].some(c => [...element.classList].includes(c)) )
Simon Arnold
quelle
0

Verwenden Sie die Standardfunktion js match ():

if( element.attr('class') !== undefined && element.attr('class').match(/class1|class2|class3|class4|class5/) ) {
  console.log("match");
}

Verwenden Sie Folgendes, um Variablen in regulärem Ausdruck zu verwenden:

var reg = new RegExp(variable, 'g');
$(this).match(reg);

Dies ist übrigens der schnellste Weg: http://jsperf.com/hasclass-vs-is-stackoverflow/22

Romualds Cirsis
quelle
Wie diese Antwort am besten, obwohl ich vermute, dass das Durchlaufen der Klassen und die Verwendung eines String-IndexOf-Tests noch schneller sein könnte ...
Terraling
0

Funktioniert bei mir:

 if ( $("element").hasClass( "class1") || $("element").hasClass("class2") ) {

 //do something here

 }
Rangel R. Morais
quelle
0

Sie können dies folgendermaßen tun:

if($(selector).filter('.class1, .class2').length){
    // Or logic
}

if($(selector).filter('.class1, .class2').length){
    // And logic
}
Hamidreza
quelle
-1

Das hat bei mir funktioniert:

$('.class1[class~="class2"]').append('something');
Tina
quelle
3
Diese Antwort hat nichts mit der gestellten Frage zu tun.
Jezen Thomas
Dies ist eigentlich eine gute Antwort. Die obige Selektorsyntax erfasst alle Elemente mit Klasse1 und Klasse2. Dann können Sie damit machen, was Sie wollen, in diesem Fall anhängen. Ich habe die Leistung im Vergleich zu anderen Methoden nicht überprüft, aber die Syntax ist nett und prägnant.
Tim Wright
2
@ TimWright Dies ist eine schreckliche Antwort. Die normale Methode zum Auswählen eines Elements mit 2 Klassen besteht darin, $('.class1.class2')dass für die zweite Klasse kein Attributselektor verwendet werden muss. Außerdem stellt sich die Frage, wie ein Element nach einer von allen Klassen ausgewählt werden kann.
Alle Arbeiter sind unerlässlich