Comment obtenir un élément parent dans jQuery

Html

Je suis grand-parent de l'élément Span

• Je suis parent direct de l'élément Span
  Je suis l'élément de portée
  

Il y a un total de quatre éléments générés dans le code ci-dessus, qui sont; ,

,
• , et . Observant leur hiérarchie ci-dessus
• L'élément est considéré comme un parent direct de l'élément,
  est le grand-parent de l'élément, et est l'arrière-grand-parent parce que tous les éléments sont imbriqués à l'intérieur de l'élément.

  jquery

  $ (document).ready (function ()
  $ ("span").parent().CSS ("Color": "Purple", "Border": "2px Solid Purple");
  );

  Nous avons appliqué la méthode parent () sur l'élément et avons également enchaîné la méthode CSS () afin de mettre en surbrillance le parent direct de l'élément et de vérifier que l'élément parent est accessible avec succès.

  Un style de base est également appliqué à ces éléments en utilisant CSS pour une meilleure démonstration et compréhension.

  Sortir

  La méthode parent () fonctionne correctement et l'élément parent est accessible avec succès.

  Méthode des parents ()

  La méthode Parents () fonctionne de la même manière que la méthode parent () avec la seule différence qui, au lieu de récupérer le parent direct, il récupère tous les parents de l'élément spécifié.

  Syntaxe

  $ (sélecteur).parents (filtre)

  Note: Le paramètre du filtre est utilisé pour compacter l'élément de recherche de recherche en spécifiant une expression de sélecteur et il est facultatif.

  Exemple

  Pour comprendre le concept de la méthode des parents (), nous consulterons le même exemple que ci-dessus et utiliserons la méthode Parents () au lieu de la méthode parent () et voir comment cela fonctionne.

  jquery

  $ (document).ready (function ()
  $ ("span").parents().CSS ("Color": "Purple", "Border": "3px Solid Purple");
  );

  Le code ci-dessus doit mettre en évidence tous les parents de l'élément du style spécifié par la méthode CSS ().

  Sortir

  L'élément mis en évidence au-dessus du corps est l'élément. La méthode des parents () le récupère également car il est également un parent de l'élément spécifié.

  ParentsUtil () Méthode

  Afin de récupérer des éléments parents entre deux éléments spécifiés, la méthode ParentUnttil () est utilisée.

  Syntaxe

  $ (sélecteur).Parentsuntil (arrêt, filtre)

  Note: Le paramètre du filtre a la même fonction que celle de la méthode parent () et parents (), cependant, le paramètre d'arrêt est utilisé pour indiquer l'élément dans lequel la recherche d'éléments parents doit s'arrêter. Les deux paramètres sont facultatifs.

  Exemple

  Cet exemple illustre le fonctionnement de la méthode parentUntil ().

  Html

  corps (arrière-grand-parent)
  Div (grand-parent)
  
  UL (parent direct)
  
  • li
    portée
    
  
  
  
  
  

  Nous avons créé une div et à l'intérieur de cette div, nous avons imbriqué trois éléments qui sont

  ,
  • , et .

    jquery

    $ (document).ready (function ()
    $ ("li").ParentsUtil ("corps").CSS ("Color": "Blue", "Border": "2px Solid Blue");
    );

    Dans le code ci-dessus, nous avons sélectionné le

  • élément et a utilisé la méthode parentUntil () pour trouver tous les parents entre le
  • , et des éléments.

    Sortir

    Comme on peut le voir dans la sortie, tous les parents de

  • (div et ul), avant d'avoir été mis en évidence.

    Méthode la plus proche ()

    La méthode la plus proche () récupère le premier élément qui correspond à l'élément spécifié.

    Syntaxe

    $ (sélecteur).le plus proche (filtre, contexte)

    Note: Le paramètre du filtre a la même fonctionnalité que dans d'autres méthodes, cependant, il est nécessaire dans cette méthode. Le paramètre de contexte, en revanche, est facultatif et spécifie un élément DOM dans lequel une correspondance doit être trouvée.

    Exemple

    Cet exemple illustre le fonctionnement de la méthode la plus proche ().

    corps (arrière-arrière-grand-parent)
    Div (grand / grand-parent)
    
    UL (deuxième ancêtre / deuxième grand-parent)
    
    UL (premier ancêtre / premier grand-parent)
    
    • li (parent direct)
      portée
      
    
    
    
    
    
    
    

    Nous avons créé une div et à l'intérieur de cette div, nous avons imbriqué deux

    éléments, et un
    • , élément.

      jquery

      $ (document).ready (function ()
      $ ("span").le plus proche ("UL").CSS ("Color": "Blue", "Border": "2px Solid Blue");
      );

      Nous avons appliqué la méthode la plus proche () pour mettre en évidence le premier ancêtre de l'élément.

      Sortir

      Comme il est souligné dans la sortie, le second

      L'élément est le premier ancêtre de l'élément.

      En utilisant les méthodes susmentionnées, vous pouvez récupérer les éléments parents d'un élément HTML spécifié.

      Conclusion

      Pour récupérer l'élément parent de jQuery en appliquant des méthodes telles que, parent (), parents (), parentUntil () et le plus proche (). La méthode parent () récupère le parent direct d'un élément, Parents () méthode récupère tous les parents de l'élément AN, parentUnttil () trouve des éléments parents entre deux éléments spécifiés, et la méthode la plus proche () récupère le premier élément qui correspond à la spécifiée élément. Toutes ces méthodes, ainsi que leurs exemples pertinents, sont expliquées dans ce guide.