javascript - Comparing DOM objects in jQuery - Stack Overflow

admin管理员组

文章数量:1208153

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.

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.

• javascript
• jquery
• dom

Share Improve this question Follow asked Sep 19, 2011 at 17:50 tamakisquaretamakisquare 17.1k2828 gold badges9090 silver badges132132 bronze badges 5

• 1 possible duplicate of jQuery object equality – Tejs Commented Sep 19, 2011 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 Commented Sep 19, 2011 at 18:00
• 1 Check the accepted answer; it has the solution for finding if the jQuery set equals another jQuery set. – Tejs Commented Sep 19, 2011 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 Commented Sep 19, 2011 at 18:27
• possible duplicate of How would you compare jQuery objects? – epascarello Commented Sep 19, 2011 at 18:46

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 12

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.

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

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

You can compare the actual DOM elements:

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

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

本文标签： javascriptComparing DOM objects in jQueryStack Overflow