Différence entre les fonctions jQuery parent (), parents () et plus proche ()

184

J'utilise jQuery depuis un moment. Je voulais utiliser le parent()sélecteur. J'ai également proposé le closest()sélecteur. Impossible de trouver une différence entre eux. Y a-t-il? Si oui, quoi?

Quelle est la différence entre parent(), parents()et closest()?

jquery Sajjan Gurung
la source
6
parent :::: retourne 1 pas vers le parent .... :::: parents ::: donne une liste de tous les parents .... :::: le plus proche ::: retourne par les frères et sœurs jusqu'à ce qu'il trouve la condition et ne renvoyez que le premier. Tout cela peut être modifié avec des sélecteurs supplémentaires
Muhammad Umer

Réponses:

177

closest()sélectionne le premier élément qui correspond au sélecteur, depuis l'arborescence DOM. Commence à partir de l'élément courant et monte.

parent() sélectionne un élément vers le haut (un niveau supérieur) dans l'arborescence DOM.

parents()est similaire à parent()mais sélectionne tous les éléments correspondants dans l'arborescence DOM. Commence à partir de l'élément parent et monte.

Subash
la source
10
N'est-ce pas .parents()(au lieu de .parent()) récupérer tous les éléments?
acdcjunior
65
Il manque un point important à cette réponse: "Le plus proche" commence par l'élément actuel et monte, où, en tant que "Parents", commence par l'élément parent et se déplace vers le haut.
Andrew
196

sur http://api.jquery.com/closest/

Les méthodes .parents () et .closest () sont similaires en ce qu'elles traversent toutes les deux l'arborescence DOM. Les différences entre les deux, bien que subtiles, sont importantes:

.le plus proche()

  • Commence par l'élément actuel
  • Parcourt l'arborescence DOM jusqu'à ce qu'il trouve une correspondance pour le sélecteur fourni
  • L'objet jQuery retourné contient zéro ou un élément

.Parents()

  • Commence par l'élément parent
  • Remonte l'arborescence DOM jusqu'à l'élément racine du document, en ajoutant chaque élément ancêtre à une collection temporaire; il filtre ensuite cette collection en fonction d'un sélecteur si celui-ci est fourni
  • L'objet jQuery retourné contient zéro, un ou plusieurs éléments

.parent()

  • Étant donné un objet jQuery qui représente un ensemble d'éléments DOM, la méthode .parent () nous permet de rechercher les parents de ces éléments dans l'arborescence DOM et de construire un nouvel objet jQuery à partir des éléments correspondants.

Remarque: les méthodes .parents () et .parent () sont similaires, sauf que cette dernière ne parcourt qu'un seul niveau dans l'arborescence DOM. De plus, la méthode $ ("html"). Parent () renvoie un ensemble contenant un document tandis que $ ("html"). Parents () retourne un ensemble vide.

Voici les fils associés:

Naveed
la source
8
Il a en fait posé des questions sur les parents (), pas sur les parents ().
ScubaSteve
2
@ScubaSteve: Veuillez vérifier à nouveau la réponse avec Note.
Naveed le
1
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $("html").parent() method returns a set containing document whereas $("html").parents() returns an empty set.
Naveed le
1
@ScubaSteve, oui, mais la question des parents () est plus intéressante.
Paul Draper
15

Les différences entre les deux, bien que subtiles, sont importantes:

.le plus proche()

  • Commence par l'élément actuel
  • Parcourt l'arborescence DOM jusqu'à ce qu'il trouve une correspondance pour le sélecteur fourni
  • L'objet jQuery retourné contient zéro ou un élément

.Parents()

  • Commence par l'élément parent
  • Remonte l'arborescence DOM jusqu'à l'élément racine du document, en ajoutant chaque élément ancêtre à une collection temporaire; il filtre ensuite cette collection en fonction d'un sélecteur si celui-ci est fourni
  • L'objet jQuery retourné contient zéro, un ou plusieurs éléments

À partir de la documentation jQuery

antyrat
la source
13
Je pense que vous décrivez .parents () ici
Muhammad Umer
1

Il y a une différence entre les deux $(this).closest('div')et$(this).parents('div').eq(0)

Fondamentalement, closestcommencez à faire correspondre l'élément à partir de l'élément actuel, tandis que parentscommencez à faire correspondre les éléments à partir du parent (un niveau au-dessus de l'élément actuel)

See http://jsfiddle.net/imrankabir/c1jhocre/1/
Imran Kabir
la source
0

parent()La méthode renvoie l'élément parent direct de l'élément sélectionné. Cette méthode ne traverse qu'un seul niveau dans l'arborescence DOM.

parents()La méthode nous permet de rechercher les ancêtres de ces éléments dans l'arborescence DOM. Commencez à partir du sélecteur donné et montez.

The **.parents()** and **.parent()** methods are almost similar, except that the latter only travels a single level up the DOM tree. Also, **$( "html" ).parent()** method returns a set containing document whereas **$( "html" ).parents()** returns an empty set.

[closest()][3]method returns the first ancestor of the selected element.An ancestor is a parent, grandparent, great-grandparent, and so on.

This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.

According to docs:

**closest()** method is similar to **parents()**, in that they both traverse up the DOM tree. The differences are as follows:

**closest()**

Begins with the current element
Travels up the DOM tree and returns the first (single) ancestor that matches the passed expression
The returned jQuery object contains zero or one element

**parents()**

Begins with the parent element
Travels up the DOM tree and returns all ancestors that matches the passed expression
The returned jQuery object contains zero or more than one element
Vaibhav Sharma
la source
-1

$(this).closest('div')est le même que $(this).parents('div').eq(0).

hsuk
la source
9
Pas tout à fait, si $ (this) est aussi un div.
Frank Fajardo