Test d'équivalence d'objet jQuery (comparaison approfondie du contenu et non de l'identité)

Question

Comment puis-je vérifier que deux objets jQuery ont des caractéristiques équivalentes, à savoir les mêmes noms de balises, attributs, valeurs et contenus textuels?

Cette question n'est pas un doublon (sage contenu ou sage identité) de l'un de ces:

• comparing jQuery objects
• How would you compare jQuery objects?
• How to check for DOM equality with jQuery?
• jQuery object equality
• How do I compare two jQuery objects for identity?

La plupart d'entre elles s'appliquent aux éléments non synthétisés sélectionnés et reçoivent une réponse similaire: comparez les objets DOM en utilisant [0] ou .get (0); ou après jQuery 1.6, utilisez .is(). Au fait, qu'est-ce qui se passe avec tout ce dédoublement? Quoi qu'il en soit, ces méthodes ne fonctionnent pas dans ce but. Exemple:

var xx = $('<a>', {href: '#'}).append($('<b>').text('foo')); 
var yy = $('<a>', {href: '#'}).append($('<b>').text('foo')); 
var zz = $('<a>', {href: '#'}).append($('<b>').text('foobar')); 

Je veux une fonction, appelez same_contents(), qui fonctionnerait comme ceci:

> same_contents(xx, yy) 
true 
> same_contents(xx, zz) 
false 

Mais aucun des moyens simples ou classiques faire parce qu'ils sont en fin de compte à comparer l'identité pas contenu:

> xx == yy 
false 
> xx == zz 
false 

> xx[0] == yy[0] 
false 
> xx[0] == zz[0] 
false 

> xx.is(yy) 
false 
> xx.is(zz) 
false 

Mon but pour cette comparaison est de vérifier qu'un arbre objet complexe a été resynthèse avec précision en utilisant deux méthodes différentes, par la force brute par rapport via moins répétitif appels de fonction.

Answer 1

Générer et comparer du code HTML brut.

function same_contents($x, $y) { 
    return $x[0].outerHTML == $y[0].outerHTML; 
} 

Puis:

> same_contents(xx, yy) 
true 
> same_contents(xx, zz) 
false 

Beware faux négatifs pour des raisons stupides:

> same_contents($('<a>', {href: '#', title: 'x'}), $('<a>', {href: '#', title: 'x'})) 
true 
> same_contents($('<a>', {href: '#', title: 'x'}), $('<a>', {title: 'x', href: '#'})) 
false 

Si c'est un problème, un normalizer serait peut-être aider.