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
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

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
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
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
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
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
source

-1

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

— hsuk
source

9

Pas tout à fait, si $ (this) est aussi un div.

— Frank Fajardo