How do you check equivalence between two HTML elements or jQuery selectors?

Question

Can you write a function that sees if the two parts of the DOM are equivalent? It should ignore irrelevant spaces. Ideally, it should also ignore empty attributes.

So, the following should be equal:

<div style=""> <div>a</div> </div> 

and

 <div><div>a</div></div> 

Answer 1

I created a function that will compare the lengths of jQuery objects and compare tag names for each child element. So far, it seems to have worked quite well in the base fiddle that I created for it. Here is the code, let me know how it works for you, and if there are any bugs / improvements that need to be made. This does not compare the inner text, although if you need to, I think it should be easy enough to customize.

UPDATE 1 :

The use of recursion instead of the for loop has been changed and now it compares the inner text of each element. If you do not need the text, then simply delete this comparison.

UPDATE 2 :

In an OP comment, I found and edited a few additional features that you can use to compare CSS elements and verify that they are the same. If not, then the element does not match and returns false.

JQuery

This first function is a jQuery function that will return a CSS property object.

 (function ($) { $.fn.getStyleObject = function () { var dom = this.get(0); var style; var returns = {}; if (window.getComputedStyle) { var camelize = function (a, b) { return b.toUpperCase(); } style = window.getComputedStyle(dom, null); for (var i = 0; i < style.length; i++) { var prop = style[i]; var camel = prop.replace(/\-([az])/g, camelize); var val = style.getPropertyValue(prop); returns[camel] = val; } return returns; } if (dom.currentStyle) { style = dom.currentStyle; for (var prop in style) { returns[prop] = style[prop]; } return returns; } return this.css(); } })(jQuery); 

The following function is defined to compare the objects returned by the previous function.

 function arrays_equal(a, b) { var result = true; $.each(a, function (key, value) { if (!b.hasOwnProperty(key) || b[key] !== a[key]) { result = false; } }); return result; } 

This is the main function that checks for equality between two elements. It will make a call to the added jQuery function to extract the object from the CSS properties, and then compare the two objects with the added second function.

  function equalElements(a, b) { if (a.length != b.length) { return false; } if (a.children().length != b.children().length) { return false; } else { if (a.children().length > 0) { var x = a.children().first(); var y = b.children().first(); equalElements(x, y); } if (a.get(0).tagName != b.get(0).tagName) { return false; } if (a.text() != b.text()) { return false; } var c = a.getStyleObject(); var d = b.getStyleObject(); if (!arrays_equal(c, d)) { return false; } } return true } 

HTML : (Used for comparison and testing)

 <div id="div1"> <div>a</div> </div> <div id="div2" style=""> <div>a</div> </div> <div id="div3" style=""></div> <div id="div4" style=""> <div>a</div> <div>a</div> </div> <div id="div5" style=""> <div>b</div> </div> <div id="div6" style="width: 50px;"> <div>a</div> </div> <div id="div7" style="width: 50px;"> <div>a</div> </div> <div id="div8" style="width: 25px;"> <div>a</div> </div> <div id="div9" style="width: 50px; height: 10px;"> <div>a</div> </div> <ul id="list1"> <li>a</li> </ul> 

Test code : (Sample see fiddle for a complete test)

 var a = $("#div1"); var b = $("#div2"); var same = equalElements(a, b); if (same) { alert("div1 is equal to div2"); }