2017-05-23 24 views
0

如何检查两个jQuery对象是否具有相同的功能,即相同的标记名称,属性,值和文本内容?jQuery对象等价测试(深度比较内容,而不是标识)

这个问题不重复(内容明智或身份明智)的任何一个:

其中大部分适用于选定的非合成元素,并且如此回答:使用[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 

我给这比较的目的是检查一个复杂的对象树重新合成准确使用两种不同的方法,通过蛮力与通过以下重复函数调用。

回答

0

生成并比较原始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会有所帮助。

+1

我不知道innerHTML会不会更好,因为方法是same_contents,这可能表示只比较内容的愿望,而不是比较最顶级的父母。 – Taplar