jQuery Select 2 Divs Up

Question

Je suis un peu confus sur la façon de sélectionner correctement un élément parent, c'est-à-dire 2 DIV.

En d'autres termes, mon HTML ressemble à ceci:

<div>Folder</div> 
<div class="file_info"> 
    <a href="test.jpg">Test File</a> 
</div> 

Voici mon actuelle jQuery: $("a[href$='.jpg']").addClass("Image");

Cependant, je ne veux pas ajouter la classe au <a>, au contraire, je veux pour ajouter la classe au 'dossier' 2 DIV ci-dessus.

Quelle est la meilleure façon de faire cela?

Merci!

Answer 1

Cela fonctionne:

$("a[href$='.jpg']").parent().prev().addClass("Image"); 

D'abord, il accède à l'élément parent de l'élément sélectionné, puis au frère le plus proche avant cet élément, atteignant ainsi l'élément div dont vous avez besoin. Voir la documentation sur parent et prev pour plus de détails.

Answer 2

$("a[href$='.jpg']").parent().parent().addClass('Image'); 

Answer 3

Compte tenu de la robustesse de jQuery, il y a presque toujours plus d'une façon de faire ce que vous devez faire - voici quelques méthodes pour sélectionner un élément de grand-père:

$("a").parent().parent(); 

Cela fait exactement ce qu'il semble like - il sélectionne le parent du parent de votre ancre. Le parent est l'élément entourant immédiatement votre élément cible. Dans ce cas, il s'agit d'un élément div les deux fois.

$("a").parents("div:eq(1)"); 

Dans cet exemple, notez que nous utilisons les plurielles des parents. Cela recherche tous les parents pour l'élément, puis le renvoie en tant que collection. Nous spécifions ensuite quels parents nous aimerions avoir retourné dans la collection en fournissant une sélection spécifique: div:eq(1). Cela signifie que nous voulons div éléments, mais en particulier les div éléments qui sont à la position 2 dans notre collection résultante. Par définition, la position 2 ne peut contenir qu'un élément, donc nous ne renvoyons qu'un seul élément - l'élément grand-père.

Si vous êtes confus en me appelant cette « position 2 » en demandant le div que égal (:eq) 1, rappelez-vous que JavaScript utilise un système d'indexation de base zéro, de sorte que le premier élément d'une collection est à l'index 0, et le second est à l'index 1, et ainsi de suite.

$("a").parents("div").get(1); 

Un autre exemple, semblable au dernier, qui utilise .get. Cela aussi fait appel à la méthode .parents pour nous donner tous les éléments div. Cela renvoie un objet jQuery rempli d'éléments div (en supposant que votre arbre parent soit plein d'éléments div). La méthode .get prend un index, correspondant à l'élément que nous souhaitons récupérer. Dans ce cas, nous recherchons le deuxième élément div, qui à nouveau serait conservé à l'index 1 sur la collection résultant de l'appel à .parents.

Une chose importante à noter est que cet exemple, contrairement à ceux qui l'ont précédé, renvoie un HTMLDivElement réel, et non un objet jQuery. La différence est que vous ne pouvez pas appeler les méthodes jQuery à partir d'un HTMLDivElement à moins que vous ne l'enveloppiez à nouveau dans $().