Comparing DOM objects in jQuery

Question

I have looked through the other SO posts that seem to be of the same question but they are not.

I have the following:

<table>
  <tr id="first_row">
    <td><span id="first_span">item1</span></td>
    <td><span>item2</span></td>
  </tr>
  <tr id="second_row">
    <td><span>item1</span></td>
    <td><span>item2</span></td>
  </tr>
</table>

and

jQuery(function() {
  var $a = $("#first_row");
  var $b = $("#first_span").parents("tr");
  var $c = $("#second_row");
});

$a and $b are two different jQuery objects but referring to the same DOM object, which $c is a different DOM object but of the same content as $a and $b. How do I compare them so that $a is equal to $b but not to $c? Thanks.

Note: I am fairly new to jQuery and DOM, so hope that I am not making any conceptual mistakes. Feel free to let me know, if any.

possible duplicate of [jQuery object equality](http://stackoverflow.com/questions/3176962/jquery-object-equality) — Tejs, Sep 19 '11 at 17:54
@Tejs - I think the SO post is about finding if two jQuery objects are the same, which is subtly different from my question - finding if two jQuery different objects are referring to the same DOM object. — tamakisquare, Sep 19 '11 at 18:00
Check the accepted answer; it has the solution for finding if the jQuery set equals another jQuery set. — Tejs, Sep 19 '11 at 18:02
@Tejs - You're right. I like that solution as it's generalized for both single and array of DOM objects comparison. Thanks. — tamakisquare, Sep 19 '11 at 18:27
possible duplicate of [How would you compare jQuery objects?](http://stackoverflow.com/questions/2436966/how-would-you-compare-jquery-objects) — epascarello, Sep 19 '11 at 18:46

jfriend00 · Accepted Answer · 2011-09-19T18:54:39.200

Compare the DOM objects themselves (which are in an array inside the jQuery object) with this:

if ($a[0] === $b[0]) {
   // code for when first DOM object of each jQuery object is the same
}

or

if ($a[0] === $c[0]) {
   // code for when first DOM object of each jQuery object is the same
}

The jQuery objects themselves are always separate objects so you have to look at the contents of the actual DOM array inside each jQuery object.

You can access the DOM objects inside a jQuery object with either the array syntax shown above or with the .get(x) method. The .get() method has two additional features that the array syntax does not. If you pass no argument to .get() it returns the whole array. If you pass a negative number like .get(-1), it returns a DOM object counting from the end of the DOM element array instead of counting from the beginning.

EDIT 1

If you want to compare the whole arrays in two jQuery objects (and it's OK to assume the order of DOM objects in the array would be the same), you could do so by writing code to do that comparison:

function jQuerySame(a, b)
    if (a.length != b.length) {
        return(false);
    }
    for (var i = 0; i < a.length; i++) {
        if (a.get(i) != b.get(i) {
            return(false);
        }
    }
    return(true);
}

Then, you could use:

if (jQuerySame($a, $b)) {
    // code for when all DOM elements are the same in these two jQuery objects
}

This could also be made to be a jQuery method itself via the jQuery plug-in mechanism.

EDIT 2

I just discovered another way to do this that is order independent and simpler using the .filter() method.

function jQuerySame(a, b) {
    return(a.length === b.length && a.length === a.filter(b).length);
}

The filter method can take a jQuery object as input. So, if we filter the a object by the b object and get the same number of results we started with then every object in a must be in b. If b didn't contain every object in a, then the length of the filtered object would be smaller. In the jQuery source, if you pass a jQuery object to the filter() method, it just loops through the array of one, calling $.inArray() on the other, eliminating the ones from the first that aren't in the second - thus doing our job for us.

Also note (just for completeness) that the `.get` method can be used as well as the array syntax: http://api.jquery.com/get/ — James Allardice, Sep 19 '11 at 17:54
Can I just compare the whole arrays using .get(), $a.get() === $b.get()? — tamakisquare, Sep 19 '11 at 18:05
@ahmoo - no you can't just compare two arrays. They are each separate objects and will always be different objects so will never pass an equality test. See the new part I added to my answer for how you could compare the whole arrays. — jfriend00, Sep 19 '11 at 18:35
Added yet a simpler way to compare the two DOM arrays using the .filter() method. — jfriend00, Sep 19 '11 at 18:44

score 7 · Answer 2 · answered Sep 19 '11 at 18:02

7

Another possibility is the .is function: http://jsfiddle.net/pimvdb/LQgCM/1/.

$a.is($b); // true
$a.is($c); // false

answered Sep 19 '11 at 18:02

pimvdb

151,816
78
307
352

interesting approach! Any side effects? How's the performance comparing to use "==="? – tamakisquare Sep 19 '11 at 18:20
1

@ahmoo: Performance is worse I guess actually. But I find it more descriptive personally. Side effects... well not really I think. It even returns true if the indices of the elements are not equal (what you would have to solve somehow with `[0]`). – pimvdb Sep 19 '11 at 19:28

score 4 · Answer 3 · answered Sep 19 '11 at 17:52

4

You can compare the actual DOM elements:

if ($a[0] === $b[0])

answered Sep 19 '11 at 17:52

SLaks

868,454
176
1,908
1,964

score 3 · Answer 4 · answered Sep 19 '11 at 17:53

3

You just want to compare the actual DOM nodes, rather than the jQuery wrappers. E.g.,

$a[0] === $b[0]; // true
$a[0] === $c[0]; // false

answered Sep 19 '11 at 17:53

jmar777

38,796
11
66
64

Comparing DOM objects in jQuery

4 Answers4

EDIT 1

EDIT 2

Linked