web-dev-qa-db-fra.com

jQuery: vérifie si div avec un certain nom de classe existe

En utilisant jQuery, je génère par programme un tas de div comme ceci:

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

Quelque part dans mon code je dois détecter si ces DIV existent. Le nom de classe pour les div est le même mais l'ID change pour chaque div. Une idée de comment les détecter en utilisant jQuery?

javascriptjqueryjquery-selectorsjavascript-framework
211
avatar

Vous pouvez simplifier ceci en vérifiant le premier objet renvoyé par JQuery comme suit:

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

Dans ce cas, s'il existe une valeur de vérité au premier index ([0]), supposons que la classe existe.

Edit 04/10/2013: J'ai créé un scénario de test jsperf ici .

377
Shaz

Vous pouvez utiliser size(), mais jQuery vous recommande d'utiliser length pour éviter le temps système d'un autre appel de fonction:

$('div.mydivclass').length

Alors:

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

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

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

UPDATE

La réponse sélectionnée utilise un test de performance, mais il est légèrement erroné car elle inclut également la sélection d'éléments dans la performance, ce qui n'est pas ce qui est testé ici. Voici un test de performance mis à jour:

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

Ma première exécution du test montre que la récupération de propriété est plus rapide que la récupération d’index, bien qu’IMO soit plutôt négligeable. Je préfère toujours utiliser la longueur, car cela a plus de sens quant à l'intention du code plutôt qu'à une condition plus concise.

97
Eli

Sans jQuery:

JavaScript natif va toujours être plus rapide. Dans ce cas: (exemple)

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

Si vous souhaitez vérifier si un élément parent contient un autre élément avec une classe spécifique, vous pouvez utiliser l'une des méthodes suivantes. (exemple)

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

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

Vous pouvez également utiliser la méthode .contains() sur l'élément parent. (exemple)

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

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

..et enfin, si vous voulez vérifier si un élément donné contient simplement une certaine classe, utilisez:

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

Voici une solution sans utiliser Jquery

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

référence lien

45
Ronald

C'est assez simple ...

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

Pour tester explicitement les éléments div:

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

10
Stefan Kendall

Le code simple est donné ci-dessous:

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

Pour masquer la div avec un identifiant particulier:

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

Voici quelques façons:

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.
    }

Nous pouvons utiliser l’un des moyens définis ci-dessus en fonction des besoins.

3
Sheo Dayal Singh

vérifier si le div existe avec une certaine classe

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

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

La méthode size() renvoie simplement le nombre d'éléments sélectionnés par le sélecteur jQuery - dans ce cas, le nombre d'éléments avec la classe mydivclass. S'il renvoie 0, l'expression est fausse et donc, il n'y en a pas. Si elle renvoie un autre nombre, les div doivent exister.

2
Herman Schaaf

Dans JQuery, vous pouvez utiliser comme ceci.

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

   // Do something if class exists

} else {

// Do something if class does not exist

}

Avec JavaScript

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

// Do something if class exists

}else{

    // Do something if class does not exist

}
1
Shaan Ansari

La meilleure façon en Javascript:

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

if ($ ("# myid1"). hasClass ("mydivclass")) {// Ne rien faire}

0
Thilina

Utilisez ceci pour rechercher une page entière

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