Sélection de HTML créé avec jQuery

Question

Pourquoi cela ne fonctionne-t-il pas?

var string = '<b>Hello</b> this is just a <b>test</b>'; 
console.log($(string).find('b')); 

je me attends à la console de Firebug pour me donner les deux <b> éléments, mais j'obtenir un tableau vide.

Cependant, si je change à ceci:

var string = '<b>Hello</b> this is just a <b>test</b>'; 
console.log($('<div/>').html(string).find('b')); 

Il fait ce que je veux. Je comprends que jQuery attribue en interne le HTML passé qu'il ne peut gérer via createElement à un élément <div> afin de l'analyser dans une structure DOM, mais ne devrait-il pas être capable de trouver des éléments dans ce HTML passé comme j'ai essayé ci-dessus? Pour rendre les choses plus confuses, parfois je vois des gens avec succès en utilisant la première syntaxe quand ils sont revenus (et parfois malformé) HTML à partir d'une requête AJAX, mais cela semble ne jamais travailler pour moi sans ajouter manuellement mon code HTML à un <div>

Qu'est-ce que je rate?

Answer 1

Dans votre première version, l'objet jQuery contient trois noeuds: un tag b, un nœud de texte et un second tag b.

Lorsque vous appelez find, il recherche les enfants de ces trois nœuds pour b tags. Comme aucun des trois nœuds n'a d'enfants, il ne trouve rien.

Votre deuxième version crée une seule étiquette div avec ces trois nœuds à l'intérieur. Lorsque vous appelez find, il recherche dans les enfants de la balise div les balises b qu'il trouve.

Si vous appelez filter au lieu de find, il recherchera les nœuds dans l'ensemble. Cependant, il ne trouvera aucune balise b imbriquée à l'intérieur d'autres nœuds de l'ensemble.

Answer 2

Il semble que lorsque vous créez un élément avec seulement $ (chaîne), jQuery crée un objet jQuery qui contient trois éléments DOM: la première balise en gras, un nœud de texte et la seconde en gras marque. À ce moment-là, quand vous appelez .find sur cela, il regarde à l'intérieur de chacun d'entre eux - et il n'y a pas de bourrage imbriqué, donc il ne trouve rien. Dans un sens, c'est exactement ce que vous demandez - vous lui donnez efficacement trois pièces DOM, et il l'analyse dans ce sens, puis les appels se trouvent sur chacune d'entre elles au lieu d'une structure parente. :)

Mais en mettant tout cela dans un div parent, et en cherchant le parent, vous trouverez ce que vous cherchez.

Vraiment, tout emballer dans un div est le moyen le plus sûr de travailler tout navigateur.