jQuery: Prüfen, ob div mit der Klasse "name" existiert

Mithilfe von jQuery-ich bin programmgesteuert generieren eine Reihe von div's so:

<div class="mydivclass" id="myid1">Some Text1</div>
<div class="mydivclass" id="myid2">Some Text2</div>

Woanders in meinem code brauche ich, um zu erkennen, ob diese DIVs vorhanden sind. Der name der Klasse für die divs die gleiche, aber die ID ändert sich für jede div. Keine Ahnung, wie zu erkennen, diese mithilfe von jQuery?

InformationsquelleAutor avatar | 2011-04-25
  1. 370

    Vereinfachen Sie dies durch Aktivierung des ersten Objekts, das zurückgegeben wird JQuery so:

    if ($(".mydivclass")[0]){
    //Do something if class exists
} else {
    //Do something if class does not exist
}

    In diesem Fall, wenn ein truthy-Wert bei der ersten ([0]) index, übernehmen dann die Klasse existiert.

    Bearbeiten 04/10/2013: ich habe ein jsperf-test-Fall hier.

    • Guter Punkt, so oder so ist es einfach nur das nachschlagen einer Eigenschaft. I don ' T care über die vier Zeichen, aber dies könnte klarer je nach Kontext...
    • Ich habe schließlich mit dieser Lösung, obwohl es andere Lösungen, die auch funktionieren. Danke für die schnellen Antworten.
    • Interessanterweise, könnte man denken, werfen :first es helfen würde, die Leistung (weiß nicht, ob sich die Leistung ist ein wichtiges Kriterium für @itgorilla), aber ob es funktioniert, variiert Wild vom browser, vermutlich, weil es ändert sich den nativen Funktionen von jQuery nutzen können, um die Auswahl. Hier ist ein test-Fall, wo das div existiert und hier ist eine, wo es nicht existiert.
    • Und wenn ich wan ' T to execute a code, wenn eine Klasse nicht existiert?
    • danke, ich wusste über die andere Verwendung, aber was ich wollte ist für den Zustand wenn die Klasse nicht vorhanden ist. ich.e mit nur einer if-code und ohne anderes. Ist das möglich?
    • Versuchen if (!$(".mydivclass")[0]){ /* do stuff */ }

    InformationsquelleAutor Shaz
  2. 94

    Können Sie size(), aber jQuery empfiehlt, die Sie verwenden Länge, den overhead zu vermeiden, der einen anderen Aufruf der Funktion:

    $('div.mydivclass').length

    Also:

    //since length is zero, it evaluates to false
if ($('div.mydivclass').length) {

    http://api.jquery.com/size/

    http://api.jquery.com/length/

    UPDATE

    Die ausgewählte Antwort verwendet eine perf test, aber es ist leicht fehlerhaft, da es auch einschließlich der element-Auswahl als Teil des perf, was nicht, was wird hier getestet. Hier ist eine aktualisierte perf test:

    http://jsperf.com/check-if-div-exists/3

    Meine erste Testlauf zeigt, dass die Eigenschaft abrufen ist schneller als index retrieval, obwohl IMO ist es ziemlich vernachlässigbar. Ich immer noch lieber mit Länge wie für mich macht es mehr Sinn, die Absicht der code anstelle von verständlicher Zustand.

    • Laut dem link, den Sie dem tool auf jsperf.com, .length bietet derzeit die besten durchschnittlichen performance.
    • Servern meine Bedürfnisse mit der geringsten Auswirkung auf die Leistung zu überprüfen.
    InformationsquelleAutor Eli
  3. 67

    Ohne jQuery:

    Native JavaScript wird immer schneller. In diesem Fall: (Beispiel)

    if (document.querySelector('.mydivclass') !== null) {
    //.. it exists
}

    Wenn Sie überprüfen möchten, um zu sehen, wenn Sie ein übergeordnetes element mit einem anderen element mit einer bestimmten Klasse, Sie könnte verwenden Sie eine der folgenden. (Beispiel)

    var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    //.. it exists as a child
}

    Alternativ können Sie die .enthält() Methode, die auf das übergeordnete element. (Beispiel)

    var parent = document.querySelector('.parent'),
    child = document.querySelector('.child');

if (parent.contains(child)) {
    //.. it exists as a child
}

    ..und schließlich, wenn Sie wollen, um zu sehen, wenn ein gegebenes element enthält lediglich eine bestimmte Klasse verwenden:

    if (el.classList.contains(className)) {
    //.. el contains the class
}
    InformationsquelleAutor Josh Crozier
  4. 53
    $('div').hasClass('mydivclass')//Returns true if the class exist.
    • Wahr, das ist eine alternative, aber eine teure ein. Langsamer sein wird als der Ansatz verwendet, die in den früheren Antworten (deutlich langsamer, bei einigen Browsern), und haben einen viel größeren Arbeitsspeicher als auch (jQuery aufbauen, bis ein array von alle der div Elemente auf der Seite, dann gehen Sie zurück und Durchlaufen Sie, um zu sehen, ob Sie das Klasse, alles wegzuwerfen, das array am Ende).
    • ist 33% schneller dann die andere Selektoren auf hier. Check jsperf.com/hasclass00
    • Nur mit einem völlig unrealistischen test-Fall (zwei div Elemente), side-steps die Frage, die ich sehr hervorgehoben (Bau-array). Versuchen Sie es mit ein paar divs: jsperf.com/hasclass00/2 Es ist 63% langsamer auf meine Kopie von Chrome, 43% langsamer auf meine Kopie von Firefox, 98% (!) langsamer auf Opera. Aber außerdem, Sie Sinn, dass es langsamer Aufbau einer Liste von divs und dann die Suche, anstatt die selector-engine alle Informationen, die es braucht.
    • Deinen zusätzlichen code, der nicht Teil dieser Fragen ist die Verlangsamung des Skripts. Ich manuell Hinzugefügt über 100 divs und meine Lösung kam aus 80% schneller. Prüfen Sie erneut.jsperf.com/hasclass00
    • Selbst mit nur 100 divs, 7% langsamer auf Chrom, 26% auf Firefox, 91% auf Opera: jsperf.com/hasclass01-with-a-few-more-divs
    • Es ist 80% schneller auf Firefox und IE. Wenn man sich die overall stats, es ist besser, verwenden Sie diese Lösung.
    • Nichts zu tun mit der prep-code, ich Wette, aber mit den divs: Sie haben auch erstellt einen Testfall zu umgehen, um den Punkt, dass ich gemacht, indem alle die divs passen sich der Selektor entweder Weg (und so, wieder, so dass der ganze array geladen). (Hast du auch einen ungültigen doc mit doppelten id Werte.) Nur eine Sek.
    • ich wusste, dass, basierend auf der Frage, ich habe nicht nichts nach. Ich glaube, Sie haben mit Ihrem code Hinzugefügt.
    • Chill, ich wusste nicht vorwerfen, Sie machen etwas. seufz Alles was ich sagte, war Ihr test-Fall war unrealistisch. Und sicher genug, wenn die meisten der divs nicht übereinstimmen (die unnötigen array-Sache), es ist langsamer: jsperf.com/hasclass01-with-a-few-more-divs 31% langsamer auf Chrome, 47% langsamer auf Firefox, 27% langsamer IE, 99% langsamer auf Opera. (Man beachte, dies sind alle synthetischen benchmarks.) Also: Wenn nur ein paar divs haben, die Klasse hasClass ist langsamer. Wenn fast alle divs die Klasse hasClass schneller ist auf den großen Browsern. Ich weiß, was ich für realistischer halte.
    • 100 divs noch 80% schneller in firefox und IE. das macht es besser geeignet ist-Selektor zu verwenden.
    • Ich glaube nicht, dass Sie gesehen hatte in meinem letzten post. Im normalen Fall, Nein, es ist nicht der beste Weg zu gehen. In dem Fall, wo Sie erwarten, dass fast alle divs die Klasse, ja, ist es. Bearbeiten: Ändern Sie "fast alle", die im vorhergehenden auf "die meisten", habe ich versucht, das "bei der Hälfte nicht, halb nicht" - Fall und hasClass war da besser. jsperf.com/hasclass02-half-match Noch unrealistisch (meiner Meinung nach; gleiche Klasse auf die Hälfte des divs auf Ihrer Seite = deutet problem), aber interessant trotzdem. Ich werde auch darauf hinweisen, dass keiner dieser tests misst der Arbeitsspeicher, das kann ein Problem für lang andauernde Seiten (apps).
    • Deine Argumentation würde den Rahmen dieser Frage. Die Frage nochmal Lesen. hasClass ist die beste Auswahl für die Frage und es ist schon bewiesen, mit jsperf.
    • Beachten Sie, dass ich bin sehr unparteiisch, und präsentiert ausgewogene counter-Beweise für Ihre Ansprüche. Tut mir Leid, wenn ich Sie berührte einen Nerv, schien das geschehen der letzten Zeit zu. Einfach entspannen, ist es nicht eine persönliche Beleidigung, es ist eine technische Diskussion. Eine Dicke Haut und ein offener Geist sind nützlich, auf StackOverflow.
    • Bekommen Sie immer Ihre selbst Argumente dann später löschen Ihre Kommentare. Es ist am besten, um Dinge auszuprobieren und zu halten, um auf die Frage zu geben, bevor Sie unzusammenhängende Kommentare. Ich bin nicht der Statistik, es ist sehr klar, in jsperf.com/hasclass00
    • Ich habe nicht gelöscht, alle Kommentare in diesem thread. Und ich habe fest auf den Punkt und fest zu machen, mit Gründen versehene Stellungnahmen unterstützt durch Beweise. Was genau war nicht Verwandte? Nein, nevermind, ist mir egal. Auf Wiedersehen.
    • Länge und hasClass sind nichts gleichermaßen. Länge gibt die Länge, während hasClass gibt true oder false zurück. Wie es verwendet wird, ist es, was zählt. Für den Fall der Erkennung einer Klasse, hasClass ist die richtige Lösung und funktioniert am besten, was Leistung und Performance betrifft, speziell, wenn Sie haben, zuzuteilen divs zu arbeiten. Das ist genau das Gegenteil von dem, was Sie geschrieben in Ihrem Kommentar.
    • Haben Sie sich einmal die Mühe zu Lesen, was ich schrieb, Blick auf die Beweise, die ich dir gab? Lassen Sie uns klar sein: Deine Lösung funktioniert. Es funktioniert auch für den Fall, dass die meisten die divs die Klasse. Es funktioniert schlecht (langsam, größere Arbeitsspeicher), wenn nur ein paar von Ihnen tun. Sie können sprechen, um alles, was Sie wollen, Sie können halten Sie behaupten, die ich nicht verstehe (ich), Sie sagen immer, es ist immer besser (es ist nicht), aber es ändert nichts an den Tatsachen. Und das ist wirklich die Letzte Antwort, die Sie bekommen, von mir aus kann ich sagen, wenn ich bin, meine Zeit zu verschwenden.
    • Die meisten divs haben nicht die gleiche Klasse wie Sie erklärte. Sie scheinen betäubt und verwirrt. Im Beispiel habe ich gepostet, 50% der divs haben keine Klasse. Auch wenn nicht der divs haben Klassen, diese Lösung ist immer noch schneller. jsperf.com/hasclass00/3. Nicht Kommentar auf meine Beiträge, wenn Sie nicht wollen, um das Gespräch fortzusetzen, oder Zeit verschwenden, wie Sie sagen.
    • Mit Ihrer aktuellen Beispiel (was ich merke, ist viel weniger divs als die Testfälle, die Sie weiter ignorieren und hat immer noch all jene ungültige doppelte id Werte), jsperf.com/hasclass00/3: hasClass 24% langsamer in Chrome 10, 42% langsamer auf Firefox 3.6, 96% langsamer auf Opera 11 (alle unter Linux), auf Windows 7, es ist 11% langsamer in Chrome 10, 48% langsamer auf IE9, 69% langsamer auf Safari und bekomme ich unterschiedliche Ergebnisse zwischen einer Krawatte und length als ~20% langsamer auf Firefox 3.6. Auf Windows XP mit IE7, 35% langsamer. Blick auf die browserscope. (Fortsetzung)
    • Das ist mit Ihrem eigenen Testfall. Vielleicht ist es schneller auf Firefox 4 auf welchem OS auch immer Sie sind, testen Sie es auf, das scheint der einzige browser, den Sie getestet, aber in der Haupt -, cross-browser, ist es nicht. Aber wieder, dies sind synthetische Ergebnisse, die notorisch unzuverlässig sind. Gebäude ein array von allen divs auf der Seite, und nachträglich auf der Suche, um zu sehen, wenn Sie eine Klasse haben, scheint nur wie eine schlechte Idee auf dem Gesicht. Manchmal scheinen die Dinge so am Ende, counter-intuitiv, ist das eine gute Idee, aber die Daten deuten darauf hin, sonst hier. (Fortsetzung)
    • dass die browserscope zeigt nur 1 für "Anzahl der tests", ich habe mehrere mit jedem und ich erwarte, dass Sie nicht mit FF4.) Mein test-Fälle mit einem sig. Anzahl der divs zeigen, dass, wenn die Anzahl der nicht-übereinstimmenden divs erhöht, die hasClass Lösung degradiert, vermutlich, weil die vermeidbaren array wird größer. Menschen verwenden einen viel von divs auf Ihren Seiten. Jedenfalls die test-Fälle sind dort für alle, um zu versuchen (@Schleicher: beachten Sie die Datum/Zeiten auf Sie), und separat ich glaube, ich habe meine theoretischen Punkt. Das hat alles viel mehr Zeit als die beiden uns verbracht haben sollte. Frieden,
    • Sie müssen sich selbst zu erziehen über die browser-Statistiken, bevor Sie Ihre Zeit verschwenden posting nutzlose Kommentare. 42% - 46% der Nutzer Firefox verwendet, die zwischen 2008 und 2011, Das ist die Hälfte der Bevölkerung. w3schools.com/browsers/browsers_stats.asp. Es ist der wichtigste browser. Für opera und safari, Statistiken sind zwischen 2%-4%. Wenn dies sind die Browser, die Sie als Basis für Ihr selector auf Leistung, herzlichen Glückwunsch.
    • LOL Du bist unter Berufung auf w3schools als eine verbindliche Quelle? Ziehen Sie den anderen ein, er hat Glöckchen auf. Versuchen Sie, Quellen, daß nicht voreingenommen dramatisch Entwickler (Sie sagen, dass sich auf der Seite verlinkt), wie Net-Anwendungen und StatCounter. Auch, nicht für nichts, aber man kommt ganz Weise aggressiv und over-the-top. Versuchen Sie, Ton es nach unten und es aufzuhellen.
    • Ist es nicht das, was Website, die Sie verwenden, für die browser-Statistiken, chrome, safari und opera wird zum Schluß kommt und unter Firefox.
    • True (für den Moment; ich sage Voraus, dass Große Dinge für Chrome). DH auf der anderen Seite...
    • Wir geben keine Antworten aus der Zukunft-browser Vorhersagen. Alle zusammen haben Sie sich auf safari, chrome und opera ignorieren die Tatsache, dass Firefox 3-mal die Bevölkerung von alle 3 kombiniert. IE ist ein weiterer browser, der nicht übersehen werden kann. Der Selektor i vorgesehen ist 80% schneller in IE und Firefox. Eine andere Sache, die Sie benötigen, im Auge zu behalten, ist die Leistung nicht spürbar mit dem bloßen Auge was auch immer browser Sie verwenden, es sei denn, Sie zählen die Zeit in Nanosekunden.
    • selector i vorgesehen ist 80% schneller in IE und Firefox" Nein, ist es nicht; gehen Sie zurück und betrachten Sie die browserscope. Aber ich Stimme den Unterschied in Bearbeitung-Zeit ist kaum spürbar. Die Speicher-Einfluss auf die moderne Seiten mit Hunderten divs, obwohl, ich bin mir nicht so sicher. Sowieso. Einverstanden nicht einverstanden sind, auf diese unglaublich triviale Sache? Können wir jetzt weitergehen?
    • Die HTML5-css-Selektor bedeutet, dass diese mit ziemlicher Sicherheit wird immer der schlechteste Weg, dies zu tun. -1 für die nicht einfach das löschen deiner post.
    • Nicht sicher, ob es nur mir so, aber diese Antwort erscheint leer auf mobile mit der offiziellen Stack Exchange app.

    InformationsquelleAutor Hussein
  5. 45

    Hier ist eine Lösung ohne die Verwendung von Jquery

    var hasClass = element.classList.contains('class name to search');
//hasClass is boolean
if(hasClass === true)
{
     //Class exists
}

    Referenz link

    InformationsquelleAutor Ronald
  6. 15

    Ist es ganz einfach...

    if ($('.mydivclass').length > 0) {
  //do something
}
    InformationsquelleAutor methodofaction
  7. 10

    Testen für div Elemente explizit:

    if( $('div.mydivclass').length ){...}

    • Dies kann etwas langsamer sein, als .mydivclass je nach browser und jQuery-version.
    • Stimmt, aber der OP hat konkret sagen "jQuery - prüfen Sie, ob div mit bestimmten Klassennamen vorhanden ist" (meine Hervorhebung), also bekommst du meine Stimme für die erste, eigentlich gehören die div Teil des Selektors.
    InformationsquelleAutor Stefan Kendall
  8. 6

    Einfachen code ist unten angegeben :

    if ($('.mydivclass').length > 0) {
   //Things to do if class exist
}

    Ausblenden des div mit der particuler-id :

    if ($('#'+given_id+'.mydivclass').length > 0) {
   //Things to do if class exist
}
    InformationsquelleAutor Jitendra Damor
  9. 2
    if ($(".mydivclass").size()){
   //code here
}

    Den size() Methode nur gibt die Anzahl der Elemente, die die jQuery-Selektor wählt - in diesem Fall die Anzahl der Elemente mit der Klasse mydivclass. Wenn es 0 zurückgibt, wird der Ausdruck falsch ist, und deshalb gibt es auch keine, und wenn es gibt eine andere Zahl, die divs müssen vorhanden sein.

    • Warum rufen Sie eine Methode auf, wenn es die length Eigenschaft? Auch diese Prüfungen für beliebiger - element mit dieser Klasse, nicht nur ein div. (Nun, das mag sein, was der OP gemeint, wenn auch nicht das, was er/Sie sagt.) Siehe Stefan Kendall ' s Antwort die tut, was der OP eigentlich gesagt (obwohl, wieder, Sie haben vielleicht gemeint, was Sie getan haben).
    • Crowder: Gut, persönlicher Geschmack wirklich - ich fühle mich einfach die size () - Methode ist da - warum es nicht verwenden. Der Mehraufwand in den Aufruf einer Funktion (es sei denn, du tust es 1000-mal in einer Schleife) ist so minimal, ich gehe lieber für etwas Klarheit im code. Auf Ihrem zweiten Punkt - ja, ich änderte meine ursprüngliche Antwort zu entfernen, die div Teil, aus zwei Gründen: 1) der Selektor ist nicht begrenzt auf die Tatsache, dass OP verwendet eine div element (es könnte sich in Zukunft ändern), und 2) in den meisten Browsern und Versionen von jQuery, AFAIK, das sollte schneller sein.
    • "ich fühle mich einfach die size () - Methode ist es - warum sollte man es nicht" Äh, okay. Die length Eigenschaft ist es, warum es nicht verwenden? Aber wenn es Ihre Präferenz, Messe 'nuff. Auf der anderen, ich wusste nicht, würden Sie bearbeitet es aus. Wenn ich das tun würde ich habe es (mal wieder, das hat er ausdrücklich gesagt "...wenn div mit..." (mein Wert) und dann erwähnt zusätzlich, dass, wenn es trifft, egal, ob es war ein div oder nicht, können Sie Graben, dass ein Teil. Aber was auch immer. 🙂
    • Crowder: Ja, ich denke, wir sind overthinking diese.
    • Crowder: Aber in meiner Verteidigung, obwohl dies nicht der Ort für die Diskussion: ich empfinde die size() Methode ist es deutlich zu machen, dass Sie zählen die Anzahl der Elemente in einem jQuery-Selektor, und nicht nur eine alte array. Aber nochmal, das ist nur meine Präferenz.
    InformationsquelleAutor Herman Schaaf
  10. 2

    überprüfen Sie, ob der div vorhanden ist, die mit einer bestimmten Klasse

    if ($(".mydivclass").length > 0) //it exists 
{

}
    InformationsquelleAutor neebz
  11. 2
    if($(".myClass")[0] != undefined){
  //it exists
}else{
  //does not exist
}
    • Scheint fast identisch zu das vorhandene Antwort.
    • Ja, es funktioniert... aber ich habe versucht, die Antwort und es hat nicht funktioniert. Wenn ich fügte hinzu, der Vergleich zu 'undefined' es schien zu funktionieren tadellos.
    InformationsquelleAutor stairie
  12. 2

    Es gibt viele Möglichkeiten zu überprüfen, die Existenz der div mit der Klasse name.Unten sind einige nützliche Weise:

    1.  if($("div").hasClass("mydivclass")){//Do any thing}

   //It returns true if any div has 'mydivclass' name. It is a based on the class name

2. if($("#myid1").hasClass("mydivclass")){//Do any thing}

   // It returns true if specific div(myid1) has this class "mydivclass" name. 
   // It is a  based on the specific div id's.

3. if($("div[class='mydivclass']").length > 0){//Do any thing}

   //It returns all the divs whose class name is "mydivclass"
  // and it's length would be greater than one.

    Wir können verwenden Sie eine der abobe definierte Weise auf der Grundlage der Anforderung.

    InformationsquelleAutor Sheo Dayal Singh
  13. 1

    Der beste Weg, in Javascript: 

    if (document.getElementsByClassName("search-box").length > 0) {
//do something
}
    InformationsquelleAutor JMJ
  14. 1
    var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}
    • Während dieser code kann die Frage beantworten, die zusätzliche Bereitstellung von Kontext in Bezug auf, warum und/oder wie dieser code beantwortet die Frage, verbessert seine langfristige Wert.
    InformationsquelleAutor Tuan Truong Quang
  15. 1

    In Jquery, die Sie verwenden können, wie dieses.

    if ($(".className")[0]){

   //Do something if class exists

} else {

//Do something if class does not exist

}

    Mit JavaScript

    if (document.getElementsByClassName("className").length > 0) {

//Do something if class exists

}else{

    //Do something if class does not exist

}
    InformationsquelleAutor Shaan Ansari
  16. 0

    if($("#myid1").hasClass("mydivclass")){//Do alle Ding}

    • Geben Sie bitte eine Erklärung auf deine Antwort
    InformationsquelleAutor Thilina
Schreibe einen Kommentar