En utilisant jQuery pour rechercher une chaîne de HTML

Si je cours ce code –

var html= '<html><head></head><body><div class="bar"></div></body></html>'; console.log($(html).find('div')); 

Je ne reçois aucun résultat, si je lance ce code –

 var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; console.log($(html).find('div')); 

Ensuite, je reçois un seul résultat renvoyé – le div intérieur ( <div class="bar"></div> ). J'aurais attendu le premier extrait de code pour renvoyer un seul résultat et le deuxième extrait de deux résultats.

De même, ce code ne renvoie aucun résultat –

 var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); console.log(code.find('div')); 

Mais ce code indique 'div' deux fois –

 var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); code.each(function() { alert( this.nodeName ); }) 

Étant donné le résultat du deuxième extrait, j'aurais attendu le premier extrait de code pour renvoyer deux résultats. Quelqu'un pourrait-il expliquer pourquoi je reçois les résultats obtenus?

Http://jsfiddle.net/ipr101/GTCuv/

Divisons cette question en deux parties.

Premier:

 var html= '<html><head></head><body><div class="bar"></div></body></html>'; console.log($(html).find('div')); 

et

 var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; console.log($(html).find('div')); 

Ne fonctionne pas parce que selon les documents jQuery() :

En passant en HTML complexe, certains navigateurs peuvent ne pas générer de DOM qui réplique exactement la source HTML fournie. Comme mentionné, nous utilisons la propriété .innerHTML du navigateur pour analyser le HTML passé et l'insérer dans le document actuel. Au cours de ce processus, certains navigateurs filtrent certains éléments tels que les éléments <html> , <title> ou <head> . En conséquence, les éléments insérés peuvent ne pas être représentatifs de la chaîne d'origine passée.

  • Dans le premier bloc de code, vos balises <html> , <head> et <body> sont supprimées et <div class="bar"></div> reste. Ne find que des recherches dans le <div> résultant, et ne peut rien trouver.
  • Dans le deuxième bloc de code, vos balises <html> , <head> et <body> sont supprimées et <div><div class="bar"></div></div> reste. Recherchez les recherches dans le résultat et trouve un seul <div> .

Quant à votre deuxième partie:

 var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); console.log(code.find('div')); 

Vous devez d'abord donner à jQuery une chaîne, ce qui nécessite et crée un objet jQuery avec les deux <div> . Ensuite, find recherches dans chaque <div> , ne trouve rien et ne renvoie aucun résultat.

Ensuite, en

 var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); code.each(function() { alert( this.nodeName ); }) 

each boucle à travers l'objet jQuery, prenant chacun des deux <div> créés, et avertit leur nom de nœud. Par conséquent, vous obtenez deux alertes.

La réponse est très simple. Lorsque vous créez un objet en utilisant jQuery (html), il crée une hiérarchie de noeuds, et lorsque vous trouvez un nœud comme 'div', il recherche dans toute la hiérarchie, à l'exception des éléments de la racine, et dans votre premier exemple, vous n'avez pas d'enfant 'div' Nœuds. Et dans votre deuxième exemple, vous n'avez qu'un nœud div 'un enfant.

Donc, si vous gardez un nœud racine supplémentaire dans toute la hiérarchie, vous pouvez facilement trouver tous vos nœuds. comme

 var html= '<html><head></head><body><div class="bar"></div></body></html>'; console.log($('<div></div>').append(html).find('div')); var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; console.log($('<div></div>').append(html).find('div')); 

.find dans le troisième exemple, recherche les enfants dans chaque élément apparié. À l'intérieur de votre div il n'y a pas d'enfants div (ils n'ont pas d'enfants), donc .find(anything) ne renverra aucun élément.

.each , d'autre part, itère sur les éléments actuels dans l'ensemble, qui comprend les div s (il y a deux éléments correspondants – les div s).

En ce qui concerne <html> dans votre premier exemple, je ne suis pas sûr – peut-être vous n'êtes pas autorisé à créer un deuxième élément <html> après la chargement de la page. $('<html><head></head><body><div class="bar"></div></body></html>'); .find seulement la div pour que .find ne renvoie rien.

La manière simple est la suivante:

Compte tenu de la chaîne:

 `var html= '<html><head></head><body><div class="bar"></div></body></html>';` 

Recherchez le div avec la barre de classe:

 `$(html).filter('.bar')` 

Ou toutes les divs:

 `$(html).filter('div')` 

Renvoie l'objet avec la bar classe