Categories
equality jquery

jQuery object equality

161

How do I determine if two jQuery objects are equal? I would like to be able to search an array for a particular jQuery object.

$.inArray(jqobj, my_array);//-1    
alert($("#deviceTypeRoot") == $("#deviceTypeRoot"));//False
alert($("#deviceTypeRoot") === $("#deviceTypeRoot"));//False

    243

    Since jQuery 1.6, you can use .is. Below is the answer from over a year ago…

    var a = $('#foo');
    var b = a;
    
    
    if (a.is(b)) {
        // the same object!
    }
    

    If you want to see if two variables are actually the same object, eg:

    var a = $('#foo');
    var b = a;
    

    …then you can check their unique IDs. Every time you create a new jQuery object it gets an id.

    if ($.data(a) == $.data(b)) {
        // the same object!
    }
    

    Though, the same could be achieved with a simple a === b, the above might at least show the next developer exactly what you’re testing for.

    In any case, that’s probably not what you’re after. If you wanted to check if two different jQuery objects contain the same set of elements, the you could use this:

    $.fn.equals = function(compareTo) {
      if (!compareTo || this.length != compareTo.length) {
        return false;
      }
      for (var i = 0; i < this.length; ++i) {
        if (this[i] !== compareTo[i]) {
          return false;
        }
      }
      return true;
    };
    

    Source

    var a = $('p');
    var b = $('p');
    if (a.equals(b)) {
        // same set
    }
    

    6

    • 1

      This solution simplifies to that given by thephpdeveloper when there is only a single element. Another sense in which jQuery objects can be considered equal is whether they have the same selector and context. This is easy enough to test: A.selector === B.selector && A.context === B.context. Often the context will always be the same, so we only have to consider the selector.

      – Casebash

      Jul 5, 2010 at 4:55


    • 2

      @Casebash – true, however consider that several selectors could end up with the same result set, eg: $(':first') and $('*:first')

      – nickf

      Jul 5, 2010 at 8:07

    • 3

      Caution @rampion and nickf, jQuery is() does not check that selectors are identical, merely that they overlap. Witness: jsfiddle.net/bnhkm/1

      – Bob Stein

      Jul 28, 2013 at 17:57


    • your equals function seems to be order-sensitive. something like stackoverflow.com/a/29648479 would work in more cases, although it’s slower.

      – Jayen

      Dec 26, 2015 at 1:57


    • 1

      The question is about jquery objects, not objects in general.

      – nickf

      May 3, 2016 at 12:13

    17

    If you still don’t know, you can get back the original object by:

    alert($("#deviceTypeRoot")[0] == $("#deviceTypeRoot")[0]); //True
    alert($("#deviceTypeRoot")[0] === $("#deviceTypeRoot")[0]);//True
    

    because $("#deviceTypeRoot") also returns an array of objects which the selector has selected.

    3

    • 1

      The two alerts will display true, because you are comparing the reference of the DOM element, == vs === will give you the same results (no type coercion needed, they are just two object references)

      Jul 5, 2010 at 2:34

    • Your second statement is actually returning True

      – Casebash

      Jul 5, 2010 at 2:39

    • ah yes it’s true. copy and paste mistake =D

      – mauris

      Jul 5, 2010 at 4:16

    15

    The $.fn.equals(...) solution is probably the cleanest and most elegant one.

    I have tried something quick and dirty like this:

    JSON.stringify(a) == JSON.stringify(b)
    

    It is probably expensive, but the comfortable thing is that it is implicitly recursive, while the elegant solution is not.

    Just my 2 cents.

    3

    • 1

      that’s not good for checking equality between two jQuery objects but for standard objects. like “{a:’x’,b:’y’,c:’z’} == {a:’x’,b:’y’,c:’z’}”. i’m wondering that there is no jQuery.isEqual(a, b)…

      – iRaS

      Apr 4, 2013 at 6:44


    • 16

      This is wrong. Order of the object properties matters. So if you have {a: 1, b: 2} and {b: 2, a: 1} this will return false when it should return true.

      May 12, 2014 at 19:41


    • 3

      @EricAlberson, do you have any suggestions on other deep compare tools or scripts that could handle this situation?

      Aug 13, 2014 at 19:14