webentwicklung-frage-antwort-db.com.de

jQuery: Überprüfe, ob div mit einem bestimmten Klassennamen existiert

Mit jQuery kann ich programmgesteuert eine Reihe von div generieren:

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

An einer anderen Stelle in meinem Code muss festgestellt werden, ob diese Divs vorhanden sind. Der Klassenname für die Divs ist derselbe, aber die ID ändert sich für jedes Div. Irgendeine Idee, wie man sie mit jQuery erkennt?

211
avatar

Sie können dies vereinfachen, indem Sie das erste von JQuery zurückgegebene Objekt folgendermaßen überprüfen:

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

In diesem Fall wird angenommen, dass eine Klasse vorhanden ist, wenn der erste Index ([0]) einen Wahrheitswert enthält.

Edit 04/10/2013: Ich habe einen jsperf-Testfall erstellt hier .

377
Shaz

Sie können size() verwenden, jQuery empfiehlt jedoch, length zu verwenden, um den Overhead eines anderen Funktionsaufrufs zu vermeiden:

$('div.mydivclass').length

Damit:

// 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 einen Perf-Test, ist jedoch leicht fehlerhaft, da auch die Elementauswahl als Teil der Perf enthalten ist, was hier nicht getestet wird. Hier ist ein aktualisierter Perf-Test:

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

Mein erster Testlauf hat gezeigt, dass das Abrufen von Eigenschaften schneller ist als das Abrufen von Indizes, obwohl es nach IMO vernachlässigbar ist. Ich bevorzuge immer noch die Verwendung von Länge, da es für mich sinnvoller ist, die Absicht des Codes zu bestimmen, als eine knappere Bedingung.

97
Eli

Ohne jQuery:

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

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

Wenn Sie überprüfen möchten, ob ein übergeordnetes Element ein anderes Element mit einer bestimmten Klasse enthält, können Sie eine der folgenden Optionen verwenden. (Beispiel)

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

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

Alternativ können Sie die Methode .contains() für das übergeordnete Element verwenden. (Beispiel)

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

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

..und schließlich, wenn Sie überprüfen möchten, ob ein bestimmtes Element nur eine bestimmte Klasse enthält, verwenden Sie:

if (el.classList.contains(className)) {
    // .. el contains the class
}
72
Josh Crozier
$('div').hasClass('mydivclass')// Returns true if the class exist.
53
Hussein

Hier ist eine Lösung ohne Jquery

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

verweis Link

45
Ronald

Es ist ganz einfach...

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

So testen Sie explizit auf div -Elemente:

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

10
Stefan Kendall

Der einfache Code ist unten angegeben:

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

So verstecken Sie den div mit einer bestimmten ID:

if ($('#'+given_id+'.mydivclass').length > 0) {
   //Things to do if class exist
}
6
Jitendra Damor

Hier sind einige Möglichkeiten:

1.  if($("div").hasClass("mydivclass")){
    //Your code

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

2. if($("#myid1").hasClass("mydivclass")){
    //Your code


    //  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){
    //Your code

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

Je nach Anforderung können wir eine der oben definierten Methoden verwenden.

3

überprüfen Sie, ob das Div mit einer bestimmten Klasse existiert

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

}
2
neebz
var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}
2
if($(".myClass")[0] != undefined){
  // it exists
}else{
  // does not exist
}
2
stairie
if ($(".mydivclass").size()){
   // code here
}

Die Methode size() gibt nur die Anzahl der Elemente zurück, die der jQuery-Selektor auswählt - in diesem Fall die Anzahl der Elemente mit der Klasse mydivclass. Wenn es 0 zurückgibt, ist der Ausdruck falsch, und daher gibt es keine. Wenn es eine andere Zahl zurückgibt, müssen die divs existieren.

2
Herman Schaaf

In Jquery können Sie so verwenden.

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

}
1
Shaan Ansari

Der beste Weg in Javascript:

if (document.getElementsByClassName("search-box").length > 0) {
// do something
}
1
JMJ

if ($ ("# myid1"). hasClass ("mydivclass")) {// Mach was auch immer}

0
Thilina

Verwenden Sie diese Option, um die gesamte Seite zu durchsuchen

if($('*').hasClass('mydivclass')){
// Do Stuff
}
0
Arosha De Silva