jQuery: Vérifier si div avec un certain nom de classe existe

En utilisant jQuery, je génère par programmation un tas de divcomme ceci:

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

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

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

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

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

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

Vous pouvez utiliser size(), mais jQuery vous recommande d'utiliser la longueur pour éviter la surcharge 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/

METTRE À JOUR

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

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

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 que l'OMI soit assez négligeable. Je préfère toujours utiliser la longueur car pour moi, cela a plus de sens quant à l'intention du code plutôt qu'à une condition plus laconique.

Sans jQuery:

Le JavaScript natif sera toujours 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 options suivantes. (exemple)

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

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

Vous pouvez également utiliser la .contains()méthode 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
}

$('div').hasClass('mydivclass')// Returns true if the class exist.

Voici une solution sans utiliser Jquery

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

lien de référence

C'est assez simple ...

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

Pour tester divexplicitement des éléments:

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

Le code simple est donné ci-dessous:

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

Pour masquer le div avec un identifiant particulier:

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

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'une des méthodes définies par abobe en fonction de l'exigence.

if ($(".mydivclass").size()){
   // code here
}

La size()méthode renvoie simplement le nombre d'éléments que le sélecteur jQuery sélectionne - 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, et s'il renvoie un autre nombre, les div doivent exister.

vérifier si le div existe avec une certaine classe

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

}

if($(".myClass")[0] != undefined){
  // it exists
}else{
  // does not exist
}

var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}

Dans Jquery, vous pouvez utiliser comme ça.

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

}

Voici un exemple de solution pour vérifier la classe (hasClass) en Javascript:

const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
   // do something if 'hasClass' is exist.
}

La meilleure façon en Javascript:

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

if ($ ("# myid1"). hasClass ("mydivclass")) {// Faites quelque chose}

Utilisez-le pour rechercher toute la page

if($('*').hasClass('mydivclass')){
// Do Stuff
}