Is there a way to compare jQuery objects while ignoring the HTML attributes' ORDER?

Question

Running the following comparison by using jQuery's "is" function will return false, since the DOM elements aren't exactly the same, although visually and functionally they are the same:

var $a = $('<div id="test" href="http://www.google.com"></div>');
var $b = $('<div href="http://www.google.com" id="test"></div>');
$a.is($b);//FALSE

Using direct comparison of the DOM objects will return false as well.

See Running example: http://jsfiddle.net/6zqwn/5/

So, is there a way to avoid taking the attributes' order into account when comparing?

(Why am I asking this question: I am using these comparisons in cross-browser unit tests in which different browsers change the attributes' order while still functionally creating the same DOM elements.)

Answer 1

If we need to ignore the attributes' order, we can use a jQuery selector as the parameter to the "is" function, and then compare the elements' inner HTML separately.

Using the same example from the question:

var $a = $('<div id="test" href="http://www.google.com"></div>');
var $b = $('<div href="http://www.google.com" id="test"></div>');
var selector = 'div#test[href="http://www.google.com"]';
($a.is(selector) == $b.is(selector)) && ($a.html() == $b.html());//TRUE

See running example: http://jsfiddle.net/GuQ53/4/

---

UPDATE

An easier solution that Joe linked to in the comments, which should work in IE9+ and handle child elements as well, is using the native "isEqualNode" function. See solution here: https://stackoverflow.com/a/19342581/1785003