JQuery each () – Comment ça marche vraiment en interne?

J'ai consulté la source de jQuery à ce sujet, mais je dois admettre que c'est probablement au-delà de ma compréhension – ou je regarde au mauvais endroit. Https://github.com/jquery/jquery/blob/master/src/core.js

Autour de la ligne 222, il y a une fonction qui semble récursive, puis à nouveau autour de la ligne 566, une autre est déclarée dans l'espace de noms .extend ().

Je suis juste curieux – comment cela fonctionne-t-il exactement? Par exemple, lorsque j'appelle:

$('.item').each(function(){ // Do Something });

Comment permet-il de parcourir le tableau des éléments DOM, quand arrêter, comment applique-t-elle la fonction? Il ne suffit pas de faire

 $('.item').doThis()

Parce que DoesThis () pourrait ne pas être membre de cet objet.

Veuillez m'expliquer 🙂 merci.

Non, ce n'est pas récursif. La fonction sur la ligne 222 est celle du prototype de jQuery ( $.fn ), alors que la fonction qu'elle appelle est jQuery.each – une propriété statique définie dans la ligne 566 . Notez comment fonctionne l' extend : si aucun objet à étendre n'est donné, il l'utilise. Il est appliqué sur jQuery et jQuery.fn dans différentes sections du code.

Alors, comment cela fonctionne-t-il exactement?

$obj.each(callback) appelle la méthode $.fn.each , qui applique $.each sur l'instance jQuery (l'enveloppe DOM) elle-même: ligne 223 .

Maintenant, en $.each , il y a quatre cas: avec ou sans tableau args fourni, et sur une structure en forme de tableau ou sur d'autres objets. Vous n'avez pas transmis d'args supplémentaires, et les instances de jQuery ont une propriété de length et ont les éléments de DOM dans des indices numériques, de sorte que la boucle dans la ligne 596 sera exécutée. Votre appel est donc équivalent à

 for (var i=0, len=$obj.length; i<len; i++) if ( callback.call($obj[i], i, $obj[i]) === false ) break;

Pour autant que je sache, ceci

 $('selector').each(func);

Est l'équivalent de ce fait:

 func = ...; $selector = $('selector'); for (var i = 0; i < $selector.length; i++) { if (func.call($selector[i], i, $selector[i]) === false) { break; } }

L'objet retourné par une sélection $ est en fait un ensemble d'éléments DOM avec un ensemble de méthodes supplémentaires qui y sont attachées, de sorte que vous pouvez basiquement travailler avec celui-ci, comme vous le feriez. J'espère que cela efface tout!

Chaque requête que vous faites dans jQuery est stockée sous forme d'un objet Array, ce qui signifie que vous pouvez accéder à la liste des éléments DOM que votre requête a détectés en procédant comme suit:

 $('.item')[0] //The first item found by your query

En interne, $ (). Chacun utilise $ .each, qui est une façon d'itérer à travers votre collection, en appelant la fonction que vous avez passée comme argument, et en utilisant 'Function.apply' pour définir 'this' comme l'objet actuel En cours d'itinéraire.

Consultez les lignes 566 à 605 dans la source

C'est itératif et assez simple.