1
votes

Condition hasClass dynamique jQuery / javascript

J'ai une condition spéciale où il y a plusieurs divs avec / sans classe XXX -personalized-product . Le XXX est dynamique. Je ne savais pas comment vérifier si le div ayant la classe xxx-custom-product est cliqué ou non. Quelque chose comme:

if(jQuery('.containers').hasClass('*-personalized-product')){
    //do my stuff
}

Quelqu'un a une idée? Pour info, je ne peux pas lancer une boucle de .containers car il y en a plusieurs centaines qui ralentissent les performances.

Merci d'avance

javascript jquery

2 commentaires

jQuery ('. containers'). is ('[class $ = "- custom-product]"') essayez d'utiliser la fonction is () de jQuery

Pourquoi ne pas ajouter une classe supplémentaire qu'ils partagent tous en commun? ex. .p-p . BTW si vous êtes vraiment inquiet pour les performances, le modèle XXX- pourrait être un identifiant à la place. Une fois qu'un identifiant est trouvé, le processus s'arrête, contrairement à une recherche d'une classe qui s'arrêtera essentiellement une fois que tout a été recherché.

3 Réponses :

0
votes

Donnez-leur également une classe de produits personnalisés .

Les noms de classe sont des chaînes opaques atomiques. Si vous essayez de les faire correspondre ou de les découper de quelque manière que ce soit, c'est un signe que vous devriez essayer une autre approche.

0 commentaires

1
votes

Utilisez la chaîne de sélection .containers[class*="-personalized-product" :

if ($containers.is(`[class*="-personalized-product"]`)) {
  // do stuff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers not-personalized"></div>

if ($(`.containers[class*="-personalized-product"]`).length) {
  console.log('doing stuff');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers foo-personalized-product"></div>

Le [class * = "- custom-product"] vérifie si l'élément a -personalized-product n'importe où dans sa classe chaîne d'attribut.

Si vous avez déjà une collection jQuery que vous voulez vérifier si elle a un élément correspondant à ce sélecteur, utilisez plutôt .is , par exemple:

if ($(`.containers[class*="-personalized-product"]`).length) {
  console.log('doing stuff');
}

1 commentaires

Merci @CertainPerformance d'avoir expliqué tout cela avec des exemples. if ($ containers.is ( [class * = "- custom-product"] )) a fonctionné pour moi.

1
votes

if(jQuery('.containers').is('[class$="-personalized-product"]')){
    //do my stuff
}
$= will select only elements having a class ending with -personalized-product

3 commentaires

Un problème avec $ est que les éléments ont plusieurs classes, à la fois des conteneurs et (éventuellement) quelque chose-personnalisé-produit , au moins, donc < code> * sera plus fiable

IMO jQuery ('. Containers') prendrait soin de .containers alors pensé à $ , cela devrait fonctionner

Merci @AkashShrivastava pour cette réponse rapide. Votre solution a également fonctionné, cependant, celle que j'ai choisie comme réponse contient plus d'informations et d'explications. Je vote aussi votre réponse.