web-dev-qa-db-fra.com

Utilisation de jQuery pour rechercher une chaîne de code HTML

Si je lance 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 retourné, si j'exécute 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 retourné - le div intérieur (<div class="bar"></div>). Je m'attendais à ce que le premier extrait de code renvoie un seul résultat et le deuxième extrait 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 alerte deux fois "div" -

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, je m'attendais à ce que le premier extrait de code renvoie deux résultats. Quelqu'un pourrait-il expliquer pourquoi j'obtiens les résultats que j'obtiens?

http://jsfiddle.net/ipr101/GTCuv/

javascriptjqueryjquery-selectors
31
ipr101

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 car selon les jQuery() documents :

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

  • Dans le premier bloc de code, vos balises <html>, <head> Et <body> Sont supprimées et <div class="bar"></div> Reste. find recherche uniquement à l'intérieur du <div> résultant, et ne trouve rien.
  • Dans le deuxième bloc de code, vos balises <html>, <head> Et <body> Sont supprimées et <div><div class="bar"></div></div> Reste. find recherche 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 donnez d'abord à jQuery une chaîne qu'il prend et transforme en objet jQuery avec les deux <div>. Ensuite, find recherche dans chaque <div>, Ne trouve rien et ne renvoie aucun résultat.

Ensuite, dans

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

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

38
Digital Plane

la réponse est très simple. lorsque vous créez un objet à l'aide de jQuery (html), il crée une hiérarchie de nœuds, et lorsque vous trouvez un nœud comme 'div', il recherche dans toute la hiérarchie sauf les éléments 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 seul nœud enfant "div".

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'));
17
vicky

La manière simple est la suivante:

Étant donné 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 classe bar

4
Jeff

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

.each , d'autre part, itère sur les éléments actuels de l'ensemble, qui inclut les divs (il y a deux éléments correspondants - les divs).

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

2
pimvdb