Obtenez le décalage des éléments dans jQuery: Comprendre la différence entre les éléments DOM .eq () et natifs

Dans jQuery, l'accès au résultat du sélecteur directement via l'index (tel que $ ('. Selector') [1]) renverra l'élément DOM natif au lieu de l'objet jQuery, ce qui entraîne l'incapacité d'appeler des méthodes jQuery telles que .offset (). Cet article analysera cette erreur commune en profondeur et fournira l'utilisation correcte de la méthode .eq (index) pour obtenir l'objet jQuery et son décalage de l'élément d'index spécifié, garantissant la robustesse et l'exactitude du code et éviter la survenue de type EERROR.

La racine du problème: objet jQuery et élément DOM natif

Lorsque vous utilisez jQuery pour les opérations DOM, un malentendu commun est que l'objet jQuery est confondu avec les éléments DOM natifs. Lorsque vous effectuez une opération de sélecteur comme $ ('. Exemple p'), jQuery renvoie un objet jQuery . Cet objet jQuery est une collection de tableaux de classe qui contiennent tous les éléments DOM natifs correspondants.

Cependant, lorsque vous essayez d'accéder à un élément de cet objet jQuery directement via l'indice de tableau, tel que $ ('. Exemple p') [1], vous extriez en fait un élément DOM natif de cette collection de tableaux de classes. Les éléments DOM natifs n'ont pas de méthodes propres aux objets jQuery, tels que .offset (), .css (), .hide (), etc. Par conséquent, si vous essayez d'appeler la méthode Offset () sur un élément DOM natif, vous lancerez une erreur de type.

Exemple d'erreur:

 // Supposons qu'il y ait plusieurs éléments <p> dans la page dans le conteneur .example // </p><div class="example"> <p> d'abord </p> <p> seconde </p> <p> troisième </p> </div>

// Essayez d'obtenir la console offset.log ($ ('. Exemple p') [1] .offset (). TOP);
// Résultat: non apparenté: $ (...) [1] .offset n'est pas une fonction

Solution: utilisez la méthode .eq ()

Pour obtenir correctement les éléments d'un index spécifique dans le résultat du sélecteur jQuery et être en mesure d'appeler la méthode jQuery, vous devez utiliser la méthode .eq () fournie par jQuery. La méthode .eq (index) renvoie un nouvel objet jQuery qui ne contient que l'élément spécifié dans la collection originale. De cette façon, vous pouvez continuer à appeler toutes les méthodes jQuery sur ce nouvel objet jQuery.

Utilisez correctement la méthode .eq ():

 // obtient le décalage du deuxième élément <p> // .eq (1) renvoie la console d'objet jQuery.log ($ ('. Exemple p'). Eq (1) .offset (). Top);
// Résultat: sortie correcte du décalage supérieur du deuxième élément </p><p></p>

Itérer à travers tous les éléments pour se compenser

Dans de nombreux scénarios, vous devrez peut-être obtenir le décalage de tous les éléments correspondants, pas seulement des éléments d'un index particulier. Dans ce cas, l'utilisation de la méthode .each () est une approche plus recommandée et flexible. La méthode .each () vous permet d'itérer sur chaque élément d'un objet jQuery et d'envelopper l'élément actuel dans un objet jQuery dans la fonction de rappel (via $ (this)), de sorte que des méthodes telles que offset () peuvent être appelées en toute sécurité.

Utilisez .each () pour obtenir les compensations de tous les éléments:

 $ ('. Exemple p'). Chaque (fonction (index) {
    // `$ (this)` représente l'élément actuellement traversé dans la fonction de rappel et a été enveloppé dans un objet jQuery const $ currentElement = $ (this);
    const offSetTop = $ currentElement.offset (). top;
    console.log (`décalage supérieur de $ {index 1} <p> Elements: $ {offsetTop}`);
});</p>

Exemple de code complet:

 

<adal>
    <meta charset="utf-8">
    <meta name="Viewport" content="width = Device-width, initial-scale = 1.0">
    <title> Exemple de décalage de l'élément jQuery </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </ script>
    <style>
        corps {marge: 50px; } / * Ajoutez des marges supérieures pour rendre le décalage plus évident * /
        .Example {border: 1px solide #ccc; rembourrage: 10px; marge-fond: 20px; }
        .example p {margin: 10px 0; rembourrage: 5px; Border: 1px en pointillé #eee; Color d&#39;arrière-plan: # f9f9f9; }
        .example p: nth-child (2) {margin-top: 50px; } / * Augmentez la marge supérieure du deuxième p pour rendre son décalage différent * /
        .example p: nth-child (3) {margin-top: 100px; } / * Ajouter la marge supérieure du troisième p * /
    </ style>
</ head>
<body>
    <div class = "example">
        <p> Il s&#39;agit du premier paragraphe. 
        <p> Il s&#39;agit du deuxième paragraphe. 
        <p> Il s&#39;agit du troisième paragraphe. 
    

    <cript>
        $ (document) .ready (function () {
            console.log ("--- Erreur Exemple ---");
            essayer {
                // Essayez d&#39;obtenir le décalage du deuxième élément <p> (mauvaise façon)
                console.log ("try $ (&#39;. Exemple p&#39;) [1] .offset (). Top:");
                console.log ($ (&#39;. Exemple p&#39;) [1] .offset (). TOP);
            } catch (e) {
                Console.Error ("Error Catch:", E.Message);
            }

            console.log ("\ n --- Exemple correct: utilisez .eq () ---");
            // utilise .eq () pour obtenir le décalage du deuxième <p> élément const secondp_offsettop_eq = $ (&#39;. Exemple p&#39;). Eq (1) .offset (). TOP;
            console.log (`Utilisez .eq (1) pour obtenir le décalage supérieur du deuxième élément <p>: $ {secondp_offsettop_eq}`);

            console.log ("\ n --- meilleure pratique: utilisez .each () pour traverser tous les éléments ---");
            $ (&#39;. Exemple p&#39;). Chaque (fonction (index) {
                const $ currentElement = $ (this);
                const offSetTop = $ currentElement.offset (). top;
                console.log (`décalage supérieur de $ {index 1} <p> Elements: $ {offsetTop}`);
            });
        });
    

</script></adal>

Notes et résumé

• Distinguer les objets jQuery des éléments DOM natifs: c'est la clé pour comprendre ces problèmes. Les objets jQuery sont la base des appels de méthode jQuery, tandis que les éléments DOM natifs suivent l'API JavaScript DOM standard.
• .Eq (index) Renvoie un objet jQuery: assurez-vous d'utiliser .eq (index) Lorsque vous devez accéder à des éléments spécifiques dans une collection via un index et continuer à utiliser la méthode jQuery.
• [index] ou .get (index) Renvoie les éléments DOM natifs: si vous avez vraiment besoin d'obtenir des éléments DOM natifs pour effectuer certaines opérations DOM non jquery, vous pouvez utiliser $ ('. Selector') [index] ou $ ('. Selector'). get (index).
• .each () est le choix préféré pour les traversées: pour les scénarios où la même opération est requise pour chaque élément d'une collection jQuery, la méthode .each () est la plus efficace et la plus cohérente avec la philosophie jQuery.

En maîtrisant ces concepts et méthodes de base, vous pourrez utiliser JQuery pour DOM plus efficacement, éviter les éERRORS de type communs et écrire du code plus robuste et maintenable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!