JQuery trouve le premier élément parent avec un préfixe de classe spécifique

124

Je veux obtenir le premier parent qui a un préfixe de classe spécifique, supposons:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

Par exemple, mon élément actuel est #dividet je veux trouver le premier élément qui a le préfixe de classe div-a. Donc, fondamentalement, il sélectionnera:

<div class="div-a89892">

jquery jquery-selectors

— Voyage dans le temps
source

Arrêtez. Utilisez plusieurs classes au lieu de combiner les informations en une seule classe. Le sélecteur «correspondant» est lent, et cette conception ne s'adapte à aucune modification. <div class='a'>, puis fournissez des règles pour div.a. Je ne sais pas du tout pourquoi vous mettez divle nom de la classe, en fait.

— Stefan Kendall

Néanmoins, ne fusionnez pas les données dans des préfixes de classe. C'est un modèle terrible, et il est facilement corrigé avec plusieurs classes.

— Stefan Kendall

@StefanKendall: Parfois, vous avez affaire à la merde tierce des autres, et parfois vous supportez des applications héritées que vous ne pouvez pas réparer rapidement. Un mauvais design est une réalité de la vie, et c'est une question parfaitement légitime.

— Nerdmaster

Réponses:

222

Utiliser .closest()avec un sélecteur:

var $div = $('#divid').closest('div[class^="div-a"]');

— Matt Ball
source

BTW, aucune idée de la raison pour laquelle cela a été refusé. Le sélecteur préfixe de classe est fragile, mais il va travailler.

— Matt Ball

Pour OP: Assurez-vous que l'élément que vous recherchez est un parent quelque part dans l'arborescence DOM et non un frère ou un similaire à l'objet que vous recherchez (selon la documentation). Ce n'est pas "le plus proche de n'importe où dans le document" mais "le plus proche en remontant l'arborescence DOM".

— Christian P.

Ça ne marche pas pour moi. Aussi, je veux trouver le premier élément qui a un préfixe spécifique, qui n'a pas besoin d'être un élément div.

— Voyage dans le temps le

@Time retirer ensuite le divsélecteur d'élément: $('#divid').closest('[class^="div-a"]'). Comme @Stefan l'a commenté, cependant, vous devriez vraiment utiliser plusieurs classes.

— Matt Ball

Ce sélecteur prend un nombre absurde de cycles (mais il peut quand même être rapide). Si vous avez besoin de prendre en charge IE6, IE7 ou IE8, cela peut vraiment vous déranger si votre DOM devient trop grand; IE lance la boîte de dialogue "Le script ne répond pas" lorsqu'un certain nombre d'instructions de la VM JS sont exécutées, et PAS après un certain temps. J'ai vu des scripts qui se terminent en 0,1 ms crash d'Internet Explorer pour cette raison même.

— Stefan Kendall

Jquery vous a ensuite permis de trouver les parents avec la .parents()méthode.

Par conséquent, je recommande d'utiliser:

var $div = $('#divid').parents('div[class^="div-a"]');

Cela donne tous les nœuds parents correspondant au sélecteur. Pour obtenir le premier parent correspondant au sélecteur, utilisez:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

Pour d'autres requêtes de traversée du DOM, consultez la documentation sur la traversée du DOM .

— Sunny R Gupta
source

La réponse n'est pas trompeuse, elle présente simplement une autre alternative à .closest (), .parents () semble plus lisible et constitue une autre solution au problème.

— Sunny R Gupta

Le plus proche est une meilleure solution que cela car le plus proche trouvera simplement la première correspondance, tandis que les parents trouveront TOUTES les correspondances en remontant le DOM. Évidemment, il est plus efficace d'utiliser le plus proche, même si je suis d'accord, ce n'est pas la fonction la mieux nommée.

— Mog0

Assez drôle, j'ai fini par utiliser cette solution car .parentsUtil () ne fonctionnait pas comme prévu.

— Mark Handy