CODEWITHSUNDEEP
javascriptjquerydom
tamakisquare
tamakisquare

Reputation: 17067

Comparing DOM objects in jQuery

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.

Upvotes: 2

Views: 6258

Answers (4)

jfriend00
jfriend00

Reputation: 707228

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.

Upvotes: 12

pimvdb
pimvdb

Reputation: 154818

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

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

Upvotes: 7

jmar777
jmar777

Reputation: 39649

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

Upvotes: 3

SLaks
SLaks

Reputation: 887315

You can compare the actual DOM elements:

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

Upvotes: 4

Related Questions