jQuery对象等价测试（内容的深度比较，不是身份）

Question

如何检查两个 jQuery 对象是否具有相同的功能，即相同的标签名称、属性、值和文本内容？

此问题不与以下任何一项重复（内容或身份）：

• 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?

其中大部分适用于选定的未合成元素，并且回答如下：使用 [0] 或 .get(0) 比较 DOM 对象；或者在 jQuery 1.6 之后使用 .is()。顺便说一句，所有这些重复是怎么回事？无论如何，这些方法不适用于此目的。示例：

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

我想要一个函数，叫它same_contents()，它会像这样工作：

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

但没有一种简单或经典的方法可以做到这一点，因为它们最终是在比较身份而不是内容：

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

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

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

我进行此比较的目的是检查是否使用两种不同的方法准确地重新合成了一个复杂的对象树，通过蛮力与通过较少重复的函数调用。

Answer 1

生成并比较原始 HTML。

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

然后：

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

谨防出于愚蠢原因的假阴性：

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

如果这是个问题，也许normalizer 会有所帮助。