JQuery .hasClass für mehrere Werte in einer if-Anweisung

habe ich eine einfache if-Anweisung als solche:JQuery .hasClass für mehrere Werte in einer if-Anweisung

if ($('html').hasClass('m320')) { 

// do stuff 

}

Dies funktioniert wie erwartet. Ich möchte jedoch weitere Klassen zur if statement hinzufügen, um zu überprüfen, ob eine der Klassen im <html>-Tag vorhanden ist. Ich brauche es, es sind nicht alle, sondern nur die Anwesenheit von mindestens einer Klasse, aber es kann mehr sein.

Mein Anwendungsfall ist, dass ich Klassen (z. B. m320, m768) für verschiedene Ansichtsfensterbreiten hinzugefügt habe.

Hier ist, was ich bisher versucht haben:

if ($('html').hasClass('m320', 'm768')) { 

// do stuff 

}

if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) { 

// do stuff 

}

if ($('html').hasClass(['m320', 'm768'])) { 

// do stuff 

    }

Keine von diesen zu funktionieren scheint obwohl. Nicht sicher, was ich falsch mache, aber wahrscheinlich meine Syntax oder Struktur.

Quelle

2012-05-11 Danny Englander

Anstatt zu raten, wie eine API Arbeiten erforderlich zu optimieren, können Sie die Dokumentation lesen sollten. http://api.jquery.com/hasclass/ Außerdem sollten Sie Ihre Entwicklerkonsole während der Entwicklung zur Hand haben/öffnen. –

möglich Duplikat von [jQuery hasClass() - Prüfe auf mehr als eine Klasse] (http://stackoverflow.com/questions/2214952/jquery-hasclass-check-for-more-than-one-class) –

Sie hatten gerade einige versaute Klammern in Ihrem zweiten Versuch.

var $html = $("html"); 

if ($html.hasClass('m320') || $html.hasClass('m768')) { 

    // do stuff 

}

Quelle

2012-05-11 21:57:59

Perfekt, danke ! –

Sie sollten '$ ('html')' wirklich in eine Variable zwischenspeichern, anstatt sie mehrmals nachschlagen zu müssen. – epascarello

@epascarello Sehr wahr, Aktualisierung der Antwort für die Nachwelt. –

122

könnten Sie is() anstelle von hasClass():

if ($('html').is('.m320, .m768')) { ... }

Quelle

2012-05-11 21:58:06 elclanrs

Yeah 'hasClass()' ist wahrscheinlich schneller, aber 'is()' ist viel bequemer die meiste Zeit – elclanrs

var classes = $('html')[0].className; 

if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) { 
    //do something 
}

Quelle

2012-05-11 22:06:53 adeneo

Wenn Sie das tun, warum überhaupt die Verwendung von jquery, um das Element zu bekommen? –

Nun, ich würde nicht, aber es bekommt nur einmal die Klassen? Es schien einfach so langweilig ohne ein wenig jQuery, also ersetzte ich getElementsByTagName mit etwas jQ Magie nur für dich! – adeneo

Für Spaß, schrieb ich ein wenig jQuery Add-on-Methode, die für eine von mehreren Klassennamen überprüfen wird:

$.fn.hasAnyClass = function() { 
    for (var i = 0; i < arguments.length; i++) { 
     if (this.hasClass(arguments[i])) { 
      return true; 
     } 
    } 
    return false; 
}

Dann könnten Sie in Ihrem Beispiel verwenden:

if ($('html').hasAnyClass('m320', 'm768')) { 

// do stuff 

}

Sie können so viele Klassennamen übergeben, wie Sie möchten.

Hier ist eine erweiterte Version, die von einem Raum auch getrennt können Sie mehrere Klassennamen übergeben:

$.fn.hasAnyClass = function() { 
    for (var i = 0; i < arguments.length; i++) { 
     var classes = arguments[i].split(" "); 
     for (var j = 0; j < classes.length; j++) { 
      if (this.hasClass(classes[j])) { 
       return true; 
      } 
     } 
    } 
    return false; 
} 

if ($('html').hasAnyClass('m320 m768')) { 
    // do stuff 
}

Arbeits Demo: http://jsfiddle.net/jfriend00/uvtSA/

Quelle

2012-05-11 22:11:28 jfriend00

Ausgezeichnet, das funktioniert gut ... auch Cross-Browser! Getestet auf FF und IE. – crmpicco

Ich habe einen kleinen Mod gemacht, damit er den jQuery-Konventionen für .addClass und .removeClass() entspricht. (http://stackoverflow.com/a/14887517/170456) – CyberMonk

Hier ist eine leichte Abwandlung Antwort von jfriend00 angeboten:

$.fn.hasAnyClass = function() { 
    var classes = arguments[0].split(" "); 
    for (var i = 0; i < classes.length; i++) { 
     if (this.hasClass(classes[i])) { 
      return true; 
     } 
    } 
    return false; 
}

ermöglicht die Verwendung von gleichen Syntax wie .addClass() und .removeClass(). z. B. .hasAnyClass('m320 m768') Muss natürlich kugelsicher sein, da es mindestens ein Argument annimmt.

Quelle

2013-02-15 02:32:24 CyberMonk

Dies kann eine andere Lösung sein:

if ($('html').attr('class').match(/m320|m768/)) { 
    // do stuff 
}

nach jsperf.com es recht schnell ist, auch.

Quelle

2013-05-31 13:50:30 Kolja

Sehr schön, viel schneller! – Philip

Dies entspricht auch Klasse 'ZZZm320WWW' und dergleichen. Probieren Sie ... match (/ \ b (m320 | m768) \ b /) aus, wobei die \ bs mit dem Anfang und dem Ende eines Wortes übereinstimmen. –

Für alle, über einige der verschiedenen Leistungsaspekte bei all diesen verschiedenen Möglichkeiten fragen, ich habe hier einen jsperf Fall erstellt: jsperf

Kurz, mit element.hasClass('class') die schnellsten ist.

Die nächste beste Wette ist elem.hasClass('classA') || elem.hasClass('classB'). Ein Hinweis zu diesem Thema: Bestellung ist wichtig! Wenn die Klasse "classA" eher gefunden wird, listet sie zuerst auf! ODER-Bedingungsanweisungen werden zurückgegeben, sobald einer von ihnen erfüllt ist.

Die schlechteste Leistung war mit element.is('.class').

Auch in der Jsperf aufgeführt ist CyberMonk's function und Kolja's solution.

Quelle

2013-11-30 00:34:53

Wirklich interessant! Ich hatte keine Ahnung von Jsperf. Danke für die Illustration der verschiedenen Variationen. –

Die hasClass Verfahren wird eine Reihe von Klassennamen als Argument akzeptieren, können Sie etwas tun:

$(document).ready(function() { 
function filterFilesList() { 
    var rows = $('.file-row'); 
    var checked = $("#filterControls :checkbox:checked"); 

    if (checked.length) { 
     var criteriaCollection = []; 

     checked.each(function() { 
      criteriaCollection.push($(this).val()); 
     }); 

     rows.each(function() { 
      var row = $(this); 
      var rowMatch = row.hasClass(criteriaCollection); 

      if (rowMatch) { 
       row.show(); 
      } else { 
       row.hide(200); 
      } 
     }); 
    } else { 
     rows.each(function() { 
      $(this).show(); 
     }); 
    } 
} 

    $("#filterControls :checkbox").click(filterFilesList); 
    filterFilesList(); 
});

Quelle

2016-10-12 14:25:48

-3

Versuchen Sie folgendes:

if ($('html').hasClass('class1 class2')) { 

// do stuff 

}

Quelle

2016-10-14 11:49:51

Willkommen bei Stack Overflow! Bitte fügen Sie eine Erklärung hinzu, warum dieser Code dem OP hilft.Dies wird helfen, eine Antwort zu liefern, von der zukünftige Zuschauer lernen können. Weitere Informationen finden Sie unter [Antwort]. –

ich mehrere Klassen in einem getestet haben Parameter der hasClass-Methode und es funktioniert wie erwartet.

$('el').hasClass('first-class second-class');

Dies ist für den Fall, dass beide Klassen vorhanden sein müssen. Für beide oder Logik verwenden Sie einfach ||

$('el').hasClass('first-class') || $('el').hasClass('second-class')

Fühlen Sie sich frei wie

Quelle

2017-11-09 17:29:03

JQuery .hasClass für mehrere Werte in einer if-Anweisung

Antwort

Verwandte Themen