jQuery referencing created element

Question

I'm rather confused, what is the difference between elementsWrapper1 and elementsWrapper2? Shouldn't the last log expression evaluate as true?

HTML:

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

JS (jQuery):

var container = $('.container');

var elementsWrapper1 = $('<div>', {
    class : 'elements-wrapper'
});

container.children().wrapAll(elementsWrapper1);

var elementsWrapper2 = $('.elements-wrapper');

console.log(elementsWrapper1);
console.log(elementsWrapper2);

//Returns False, but why?
console.log(elementsWrapper1 === elementsWrapper2)

Thanks

`elementwrapper1` gets every `DIV` with that class `elementwrapper2` grabs every element with that class — Train, Apr 11 '16 at 19:49
The 2 objects are not equal since their underlying html is different. https://jsfiddle.net/7w5k5vxo/2/ — DinoMyte, Apr 11 '16 at 19:52

score 1 · Accepted Answer · edited May 23 '17 at 11:50

Every time you call $(), either to create an object (as you did with elementsWrapper1) or perform a selection (as with elementsWrapper2), it creates a new jQuery object. Even if two jQuery objects refer to the same collection of DOM elements, they're not the same Javascript object, so === will consider them non-equal.

If you want to test whether two jQuery objects are equivalent, you can use the .is() method.

console.log(elementsWrapper1.is(elementsWrapper2));

See jQuery object equality

jQuery referencing created element

1 Answers1