jQuery: Vérifier si la div avec la classe de nom

À l'aide de jQuery, je suis par programmation de la génération d'un tas de divcomme ceci:

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

Quelque part dans mon code j'ai besoin de détecter si ces DIVs existent. Le nom de la classe pour les divs est la même, mais les changements d'identité pour chaque div. Aucune idée de la façon de les détecter à l'aide de jQuery?

InformationsquelleAutor avatar | 2011-04-25

369

Vous pouvez simplifier cela en vérifiant le premier objet qui est retourné à partir de JQuery comme suit:
```
if ($(".mydivclass")[0]){
    //Do something if class exists
} else {
    //Do something if class does not exist
}
```
Dans ce cas, si il y a un truthy valeur lors de la première ([0]) de l'indice, alors en charge de la classe existe.

Modifier 04/10/2013: j'ai créé un jsperf cas de test ici.
- Bon point, de toute façon c'est juste une recherche de propriété. Je n'ai pas de soins sur les quatre personnages, mais il pourrait être la claire selon le contexte...
- J'ai fini par utiliser cette solution si il y a d'autres solutions que de travail aussi. Merci pour les réponses rapides.
- Fait intéressant, vous pourriez penser à jeter un :first, il y aurait aider à la performance (ne sais pas si la performance est un critère important pour @itgorilla), mais qu'il ne varie sauvagement, par navigateur, sans doute parce qu'elle modifie les fonctionnalités natives de jQuery pouvez utiliser pour faire la sélection. Voici un cas où la div existe et voici un site où il n'existe pas.
- Et si je wan pas à exécuter un code si une classe n'existe pas?
- merci, je connaissais l'autre utilisation, mais ce que je voulais faire est d'exécuter la condition si la classe n'existe pas. j'.e seulement si code et sans d'autre. Est-ce possible?
- Essayez if (!$(".mydivclass")[0]){ /* do stuff */ }
InformationsquelleAutor Shaz
93

Vous pouvez utiliser size(), mais jQuery vous recommande d'utiliser la longueur d'éviter la surcharge d'un autre appel de la fonction:
```
$('div.mydivclass').length
```
Donc:
```
//since length is zero, it evaluates to false
if ($('div.mydivclass').length) {
```
http://api.jquery.com/size/

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

Mise à JOUR

La réponse sélectionnée utilise un test de perf, mais c'est un peu imparfait, car il est aussi notamment la sélection d'éléments dans le cadre de la perf, ce qui n'est pas ce qui est testé ici. Voici une mise à jour du test de perf:

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

Mon premier run de l'essai montre que la propriété de la récupération est plus rapide que l'indice de récupération, bien que l'OMI c'est assez négligeable. Je préfère encore à l'aide de la longueur comme pour moi, il ne fait plus de sens à l'intention du code au lieu d'un plus laconique condition.
- Selon le lien que vous avez fourni à l'outil sur jsperf.com, .length offre actuellement les meilleures performances dans la moyenne.
- Les serveurs de mes besoins avec le plus petit impact sur les performances pour un chèque.
InformationsquelleAutor Eli
67

Sans jQuery:

JavaScript natif est toujours va être plus rapide. Dans ce cas: (exemple)
```
if (document.querySelector('.mydivclass') !== null) {
    //.. it exists
}
```
Si vous voulez vérifier pour voir si un élément parent renferme un autre élément à une classe spécifique, vous pouvez utiliser l'une des opérations suivantes. (exemple)
```
var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    //.. it exists as a child
}
```
Alternativement, vous pouvez utiliser le .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 pour voir si un élément contient simplement une certaine classe, utilisation:
```
if (el.classList.contains(className)) {
    //.. el contains the class
}
```
InformationsquelleAutor Josh Crozier
53
```
$('div').hasClass('mydivclass')//Returns true if the class exist.
```
- Vrai c'est une alternative, mais cher. Sera plus lent que l'approche utilisée dans les précédentes réponses (nettement plus lent, sur certains navigateurs), et ont beaucoup plus d'impact de mémoire ainsi (jQuery doit construire un tableau de tous de la div éléments sur la page, puis revenir en arrière et boucle à travers eux pour voir si ils ont la classe, de jeter le tableau à la fin).
- est 33% plus rapide que les autres sélecteurs sur ici. Vérifier jsperf.com/hasclass00
- Seulement avec un complètement irréaliste de cas de test (deux div éléments) de ce côté-étapes le problème que j'ai évoqué (construction de la matrice). Essayez avec un tas de divs: jsperf.com/hasclass00/2 C'est 63% plus lent sur ma copie de Chrome, 43% plus lent sur ma copie de Firefox, 98% (!) plus lent sur l'Opéra. Mais en outre, il sens qu'il est lent à créer une liste de divs et ensuite, la recherche, plutôt que de donner le sélecteur de moteur toutes les informations dont il a besoin.
- Votre ajout d'un code qui ne fait pas partie de cette question est de ralentir le script. J'ai ajouté manuellement plus de 100 divs et ma solution est sorti de 80% plus rapide. Vérifiez de nouveau.jsperf.com/hasclass00
- Même avec seulement 100 vrd, 7% plus lent sur Chrome, 26% sur Firefox, 91% sur l'Opéra: jsperf.com/hasclass01-with-a-few-more-divs
- C'est 80% plus rapide sur Firefox et IE. Quand vous regardez les statistiques générales, il est préférable d'utiliser cette solution.
- Rien à voir avec la préparation de code, je parie, mais avec des divs: Vous avez nouveau créer un cas de test pour contourner le point que j'ai fait, en faisant tous les divs match le sélecteur de toute façon (et donc, encore une fois, l'ensemble de la matrice chargés). (Vous avez également créé une défaillance de doc avec double id valeurs). Juste une seconde.
- je n'ai que basé sur la question, je n'ai rien inventé. Je crois que vous avez fait avec votre code ajouté.
- Chill, je n'ai pas vous accuser de faire quoi que ce soit. soupir Tous j'ai dit c'est votre cas de test n'est pas réaliste. Et bien sûr, si la plupart des divs ne correspondent pas (inutile de la matrice de chose), c'est plus lent: jsperf.com/hasclass01-with-a-few-more-divs 31% plus lent sur Chrome, 47% plus lent sur Firefox, 27% plus lent sur IE, 99% plus lent sur l'Opéra. (De l'esprit, ce sont tous les points de référence.) Donc: Si seulement un couple de divs ont la classe, hasClass est plus lent. Si presque tous les divs ont la classe, hasClass est plus rapide sur les grands navigateurs. Je sais qui je pense est plus réaliste.
- 100 divs encore 80% plus rapide dans firefox et IE. cela en fait le plus adapté sélecteur à utiliser.
- Je ne pense pas que vous auriez vu mon dernier post. Dans le cas normal, non, ce n'est pas la meilleure façon d'aller. Dans le cas où vous vous attendez presque tous les divs pour avoir la classe, oui, il est. Edit: modifier "presque tous" dans le précédent, à la "plus", j'ai essayé le "la moitié, la moitié n'avez pas de cas, et hasClass était mieux là. jsperf.com/hasclass02-half-match Encore irréaliste (à mon esprit; même classe sur la moitié de la divs sur votre page = suggère problème), mais intéressant tout de même. Je vous ferais également remarquer que aucun de ces tests de mesures de l'impact de mémoire, qui peut être un problème longues pages (apps).
- Votre argument est au-delà de la portée de cette question. Lisez la question à nouveau. hasClass est le meilleur sélecteur pour la question posée et il est déjà prouvé avec jsperf.
- Notez que j'ai été très impartiale, et présenté équilibrée des contre-preuves de vos allégations. Je suis désolé si j'ai touché un nerf, qui semblait arriver la dernière fois, trop. Détendez-vous, ce n'est pas un affront personnel, c'est une discussion technique. Une peau épaisse et une ouverture d'esprit sont utiles sur StackOverflow.
- Vous obtenez toujours votre auto dans les arguments ensuite effacer vos commentaires. Il est préférable d'essayer des choses et s'en tenir à la question posée avant de faire des commentaires sans rapport avec. Je ne fais pas les stats, c'est très clair dans le jsperf.com/hasclass00
- Je n'ai pas supprimé des commentaires dans ce thread. Et j'ai coincé au point et coincé à faire motivé déclarations appuyées par des preuves. Exactement ce qui est sans rapport? Non, tant pis, je n'ai pas de soins. Au revoir.
- la longueur et la hasClass sont en rien semblables. length renvoie la longueur tandis que hasClass renvoie true ou false. Comment il est utilisé, est ce qui importe. Pour le cas de la détection d'une classe, hasClass est la bonne solution et qui fonctionne le mieux la performance sage, spécialement quand vous avez beaucoup de divs de travailler avec. C'est exactement à l'opposé de ce que vous avez posté votre commentaire.
- Avez-vous même pas la peine de lire ce que j'ai écrit, regardez la preuve que je vous ai donné? Soyons clairs: Votre solution fonctionne. Il fonctionne bien pour le cas où plus de la divs ont la classe. Il fonctionne peu (plus lentement, plus grand impact de mémoire) lorsque seulement quelques-uns d'entre eux. Vous pouvez en parler autour d'elle tout ce que vous voulez, vous pouvez continuer à prétendre que je ne comprends pas (je ne), vous pouvez dire que c'est toujours mieux (n'est pas), mais on ne change pas les faits. Et c'est vraiment la dernière réponse que vous obtenez à partir de moi, je peux dire quand je perds mon temps.
- La plupart des divs n'ont pas la même classe que vous avez déclaré. Vous semblez hébété et confus. Dans l'exemple que j'ai posté, 50% de la les divisions n'ont pas de classe. Même si le non de la les divisions des classes, cette solution est encore plus rapide. jsperf.com/hasclass00/3. Ne faites pas de commentaires sur mes posts si vous n'avez pas l'intention de continuer la conversation ou de perdre du temps comme vous le dites.
- Avec votre dernier exemple (que j'ai un avis a beaucoup moins de divs que le cas de test vous à ne pas tenir compte, et encore a tous ceux qui invalide double id valeurs), jsperf.com/hasclass00/3: hasClass est 24% plus lent sur Chrome 10, 42% plus lent sur Firefox 3.6, 96% plus lent sur Opera 11 (sur Linux); sur Windows 7, c'est 11% plus lent sur Chrome 10, 48% plus lent sur IE9, 69% plus lent sur Safari, et j'obtiens des résultats différents entre une cravate et length être ~20% plus lent sur Firefox 3.6. Sur Windows XP à l'aide d'IE7, 35% plus lent. Regardez les browserscope. (suite)
- C'est avec votre propre test. C'est peut-être plus rapide sur Firefox 4 sur n'importe quel OS vous faites des tests sur, ce qui semble être le seul navigateur que vous avez testé, mais dans l'ensemble, la croix-navigateur, il n'est pas. Mais nouveau, ce sont synthétique des résultats, qui sont notoirement peu fiables. La construction d'un tableau de toutes les divs sur la page, et rétroactivement à la recherche pour voir si ils ont une classe, semble juste comme une mauvaise idée sur le visage de celui-ci. Parfois, les choses que semble que se retrouvent, de manière contre-intuitive, d'être une bonne idée, mais les données suggèrent le contraire ici. (suite)
- que le browserscope ne montre 1 pour "le nombre de tests", je l'ai fait plusieurs avec chacun et j'espère que vous l'avez fait avec FF4.) Mon cas de test avec un sig. nombre de divs montrent que lorsque le nombre de non-appariement des divs augmente, la hasClass solution se dégrade, sans doute parce que l'évitables tableau grandit. Les gens à utiliser un beaucoup de divs sur leurs pages. De toute façon, les cas de test sont là pour quiconque d'essayer (@lurkers: l'esprit de la date/temps sur eux), et, séparément, je pense que j'ai fait de mon point théorique. Tout cela a beaucoup plus de temps que l'un de nous devrait avoir dépensé. La paix,
- Vous avez besoin de vous renseigner sur les statistiques navigateur avant de perdre votre temps à poster les commentaires inutiles. 42% - 46% des utilisateurs de Firefox entre 2008 et 2011, C'est la moitié de la population. w3schools.com/browsers/browsers_stats.asp. C'est le plus important du navigateur. Comme pour l'opéra et safari, les statistiques sont entre 2 à 4%. Si ce sont les navigateurs de la base de votre sélecteur de performance sur, félicitations.
- LOL Vous êtes en citant w3schools comme une source faisant autorité? Tirez l'autre, il y a des cloches. Essayez de sources ne sont pas biaisée de façon spectaculaire pour les développeurs (ils disent qu'eux-mêmes, regardez sur la page que vous avez mis en lien), comme Net Applications et StatCounter. Aussi, pas pour rien, mais vous avez à venir à travers les question agressif et plus de-the-top. Essayez de modérer et de l'éclairer.
- Il n'est pas le site que vous utilisez pour les statistiques navigateur, chrome, safari et opéra vient en dernier et en dessous de Firefox.
- Vrai (pour l'instant; je prédis que de Grandes Choses pour Chrome). C'est à dire, sur l'autre main...
- On ne donne pas de réponses demain navigateur prédictions. Tout au long de vous ai mis l'accent sur safari, chrome et opera, et en ignorant le fait que Firefox faire 3 fois la population de tous les 3 combinés. IE est un navigateur qui ne peuvent pas être négligés. Le sélecteur j'ai fourni est de 80% plus rapide dans IE et Firefox. Une autre chose que vous devez garder à l'esprit est la performance ne sera pas perceptible à l'oeil nu, quel que soit le navigateur que vous utilisez, sauf si bien sûr vous le temps de mesure en nanosecondes.
- sélecteur j'ai fourni est de 80% plus rapide dans IE et Firefox" non, il N'est pas, revenir en arrière et regarder le browserscope. Mais je suis d'accord la différence dans les temps de traitement est peu probable pour être perceptible. L'impact de mémoire moderne de pages avec des centaines de vrd, si je ne suis pas si sûr. De toute façon. En accord ou en désaccord sur cette question extrêmement trivial point? Pouvons-nous passer maintenant?
- Le HTML5 css sélecteur signifie que ce sera presque certainement toujours être la pire façon possible de le faire. -1 pour ne pas la simple suppression de votre post.
- Pas sûr si c'est juste moi, mais cette réponse semble vide sur mobile via l'officiel de la Pile d'Échange app.
InformationsquelleAutor Hussein
45

Ici est une solution sans l'aide de Jquery
```
var hasClass = element.classList.contains('class name to search');
//hasClass is boolean
if(hasClass === true)
{
     //Class exists
}
```
référence lien
- classList est pris en charge uniquement dans IE10+: caniuse.com/classlist. Vous devez ajouter un polyfill github.com/eligrey/classList.js ou écrire vos propres méthodes
InformationsquelleAutor Ronald

C'est assez simple...

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

InformationsquelleAutor methodofaction

10

Pour tester div éléments explicitement:

if( $('div.mydivclass').length ){...}
- Cela peut être légèrement plus lente que .mydivclass selon le navigateur et la version jQuery.
- Vrai, mais l'OP n'a spécifiquement dire "jQuery - vérifier si le div avec une certaine classe, le nom" (mon emphase), de sorte que vous obtenez mon vote pour être le premier à inclure le div partie de la sélection.
InformationsquelleAutor Stefan Kendall

Le simple code est donné ci-dessous :

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

Pour cacher la div avec particuler id :

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

InformationsquelleAutor Jitendra Damor

2
```
if ($(".mydivclass").size()){
   //code here
}
```
La size() méthode retourne le nombre d'éléments que le sélecteur jQuery sélectionne - dans ce cas, le nombre d'éléments avec la classe mydivclass. Si elle renvoie la valeur 0, l'expression est fausse, et donc il n'y a rien, et que si elle renvoie à tout autre nombre, les divs doit exister.
- Pourquoi appeler une méthode quand il y a la length propriété? Aussi, cette vérification pour aucun de l'élément avec la classe, et pas seulement un div. (Maintenant, que peut-être ce que l'OP voulait dire, même si c'est pas ce qu'il/elle dit.) Voir Stefan Kendall réponse qui fait ce que l'OP a réellement dit (même si, encore une fois, ils ont peut-être voulu dire ce que vous avez fait).
- Crowder: eh Bien, les goûts personnels vraiment - je me sens la méthode size() est-il - pourquoi ne pas l'utiliser. Les frais généraux supplémentaires dans l'appel d'une fonction (à moins que tu le fais 1000 fois dans une boucle) est si minime, je vais plutôt aller pour le peu de clarté dans le code. Sur votre deuxième point, oui, j'ai changé ma réponse originale à cette question de supprimer la div partie, pour deux raisons: 1) le sélecteur n'est pas que délimitée sur le fait que l'OP utilise un div élément (cela pourrait changer dans le futur), et 2) dans la plupart des navigateurs et versions de jQuery, autant que je sache, cela devrait être plus rapide.
- "je me sens la méthode size() est-il - pourquoi ne pas l'utiliser" Euh, d'accord. Le length propriété est là, pourquoi ne pas l'utiliser? Mais si c'est votre préférence, juste 'nuff. Sur l'autre, je ne savais pas qu'on avais édité pour la sortir. Si je devais le faire, j'avais l'avons laissée dans (encore une fois, il a précisément dit "...si div avec..." (mon emphase) et ensuite mentionné, en outre, que si elle n'a pas d'importance si c'était un div ou non, vous pourriez fossé de la partie. Mais quoi que ce soit. 🙂
- Crowder: Ouais, je pense que nous allons avoir à y penser cela.
- Crowder: Mais pour ma défense, si ce n'est pas la place pour la discussion: je me sens la size() méthode est là pour indiquer clairement que vous êtes de compter le nombre d'éléments dans un sélecteur jQuery, et pas n'importe quel vieux tableau. Mais encore une fois, c'est juste ma préférence.
InformationsquelleAutor Herman Schaaf
2

vérifier si la div existe avec une certaine classe
```
if ($(".mydivclass").length > 0) //it exists 
{

}
```
InformationsquelleAutor neebz
2
```
if($(".myClass")[0] != undefined){
  //it exists
}else{
  //does not exist
}
```
- Semble presque identique à cette réponse existant.
- Oui, c'est fait... mais j'ai essayé de répondre et il ne fonctionne pas. Quand j'ai ajouté la comparaison pour 'undefined' il semblait fonctionner parfaitement.
InformationsquelleAutor stairie

Il existe de nombreuses façons de vérifier l'existence de div avec certains nom de la classe.Ci-dessous sont quelques-uns utile:

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.

Nous pouvons utiliser l'une de la part d'abobe défini fondé sur l'exigence.

InformationsquelleAutor Sheo Dayal Singh

Le meilleur moyen en Javascript:

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

InformationsquelleAutor JMJ

1
```
var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}
```
- Alors que ce code peut répondre à la question, en fournissant plus de contexte sur le pourquoi et/ou comment ce code répond à la question améliore sa valeur à long terme.
InformationsquelleAutor Tuan Truong Quang

En Jquery vous pouvez l'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

}

InformationsquelleAutor Shaan Ansari

0

if($("#myid1").hasClass("mydivclass")){//Faire quelque chose}
- Veuillez donner quelques explications pour votre réponse
InformationsquelleAutor Thilina

Vous devez vous connecter pour publier un commentaire.

Sans jQuery: