JSFiddle - React, Tailwind, and code Playground
HTML
<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>
JavaScript
(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(/\-([a-z])/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);
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;
}
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
}
var a = $("#div6");
var b = $("#div7");
var same = equalElements(a, b);
if (same) {
alert("div6 is equal to div7");
}
a = $("#div6");
b = $("#div8");
same = equalElements(a, b);
if (!same) {
alert("div6 is not...