Advanced usage

That’s all well and fun, but comparing non-plain objects is where $.equals shines.

With that in mind, I wrote two symmetrical operations for jQuery: scatter and gather. In Maths multiplication distributes over addition, allowing you to scatter a x (b + c) to a x b + a x c, and gather back a x b + a x c to a x (b + c). Likewise with these two operations, you can scatter jQuery over its elements: $:[ e1, e2 ] to [ $:e1, $:e2 ] and gather back [ $:e1, $:e2 ] to $:[ e1, e2 ].

{[ .scatter-gather | 1.hilite(=javascript=) ]}

Here are some advanced use cases

{[ .advanced-use | 1.hilite(=javascript=) ]}

whose console output is

As you see, even if by looking at the console you can easily spot outstanding differences thanks to the great object inspection offered by the browser, my plugin is dumber by design, and in general it finds different differences. The important thing is that you get a false or a true when you really expect a false or a true, respectively.

In particular,

case 19 and 20 tell us that object_$ and $(object_$.toArray()) are not identical but they contain the same DOM elements

case 21 and 22 tell us that object_$ and $.gather(object_$.scatter()) are not identical but they contain the same DOM elements

case 23 tells us that $(object_$.toArray()) and $.gather(object_$.scatter()) are identical (but still different objects)

case 24 tells us that $(“body”) and $(“head”) are different… as expected 🙂

please notice that they are both jQuery objects containing only one DOM element, but given the way the filter is written, $.equals tries to compare also lastElementChild. We could have taken the key into consideration like filter: function(value, key) { … }