jQuery objects of the same element are not equal?

Question

This must be something I'm overlooking, but please look at the following page and JavaScript and tell me why, for everything that's holy, jQuery won't return true?

HTML: http://alcatel.scottbuckingham.com/reporting/test.html

<p class="test">hello1</p>

JS: http://alcatel.scottbuckingham.com/reporting/_scripts/collapse.js

;(function($, window, document, undefined) {

        var t = $('.test');
        var s = $('.test');

        console.log(t);
        console.log(s);

        if (t === s) {
            console.log('yes');
        }

})(jQuery, window, document);

I've literally spent hours trying to work it out and reduced it to this, almost 1 === 1statement which won't work.

Any help is highly appreciated!

I am really confused now. If its Javascript even then it should work. Or please can anyone lead me to some where where I can understand what is happening. — Talha Ahmed Khan, May 03 '13 at 12:30
It works but he's comparing jquery objects and not HTML nodes. It's two different jquery objects when he wants to compare html. — Henrik Andersson, May 03 '13 at 12:34
Uhm, thanks for pointing out that I should learn JavaScript, but I'm well aware of the difference between the two. In _either_ case, comparing jQuery objects or not, this should return true. — Reinier Kaper, May 03 '13 at 12:43
first of all, match elements when the DOM is ready. Second of all, these object are not equal cause they got other references. They will never be equal, even if you got 2 empty arrays. So i.e. `a = []; b = []; a === b; # false` but `a = b = []; a ===b; #true` - same reference — Eru, May 03 '13 at 12:44
Yeah I get that, but I thought two jQuery objects that select (and return) the same DOM element would be equal. Guess I never used it in that fashion and ran into some unexpected behavior. — Reinier Kaper, May 03 '13 at 12:50

Adil Shaikh · Accepted Answer · 2013-05-03T12:34:17.147

8

Try this - Working Demo --> http://jsfiddle.net/mohammadAdil/tHjgN/

 if(t.is(s)) {
    console.log('yes');
 }

http://api.jquery.com/is/

Or with ===

if (t.get(0) === s.get(0)) { //<--Compare DOM elements instead of jquery object's
    console.log('again yes');
}

Demo --> http://jsfiddle.net/mohammadAdil/tHjgN/1/

edited May 03 '13 at 12:34

answered May 03 '13 at 12:20

Adil Shaikh

44,509
17
89
111

Thanks, for some reason I never realized that jQuery won't let you compare identical objects. Maybe I just never used it before and that's what threw me off here. Thanks for the help! – Reinier Kaper May 03 '13 at 12:46

score 2 · Answer 2 · answered May 03 '13 at 12:26

You can use the jQuery is method.

Description: Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

if (t.is(s)) {
    console.log('yes');
}

Example fiddle: http://jsfiddle.net/IrvinDominin/q86Sh/

score 1 · Answer 3 · answered May 03 '13 at 12:23

1

You could do this, a comparison of the HTML nodes. Which if you want to compare HTML objects is the correct way to do it.

if (t[0] === s[0]) {
    console.log('yes');
}

answered May 03 '13 at 12:23

Henrik Andersson

45,354
16
98
92

But the point is: it doesn't even look like jQuery finds the elements. There's really nothing else on the page, and if I create a jsFiddle with this exact code, it works fine. – Reinier Kaper May 03 '13 at 12:25
Using the Chrome JS console finds the elements allright and jquery works as it should when following your link - you're using and IIFE and that runs when its found so put it either in the bottom of your DOM or use `$(document).ready()`. – Henrik Andersson May 03 '13 at 12:28

Antony · Answer 4 · 2013-05-03T12:36:20.780

1

You had your script in the <head> but the element <p class="test">hello1</p> in <body>.

First you should use $(document).ready() to make sure the content is loaded. Then check if they are equal using .is().

$(document).ready(function() {

        var t = $('.test');
        var s = $('.test');

        console.log(t);
        console.log(s);

        if (t.is(s)) {
            console.log('yes');
        }
});

Compare the examples with and without the .ready() function.

edited May 03 '13 at 12:36

answered May 03 '13 at 12:28

Antony

14,900
10
46
74

No it doesn't ;-) This is a very valid jQuery plugin pattern. See: http://jqueryboilerplate.com/ – Reinier Kaper May 03 '13 at 12:30
@ReinierKaper You should note that the reference you gave is for developing jQuery plugins (extensions to jQuery itself), not for using jQuery within your own HTML page. – Cheekysoft May 03 '13 at 12:37
God it's not my day... Of course I needed the document ready function too, which made my script useless in the first place, but I also found out (see answer above) that jQuery won't allow you to compare two objects directly. Sorry for my stubbornness... It was a long night. – Reinier Kaper May 03 '13 at 12:52

score 1 · Answer 5 · answered May 03 '13 at 12:31

This could help you:

var test = document.getElementById('test') //returns a HTML DOM Object
var test = $('#test') //returns a jQuery Object
var test = $('#test')[0] //returns a HTML DOM Object

So (like limelights told you) use this:

if (t[0] === s[0]) {
    console.log('yes');
}

Also it is good practice to use

$(document).ready(function(){


});

around your code.

jQuery objects of the same element are not equal?

5 Answers5

Linked