jQuery - how to check if two elements are the same?

Question

I need to pass an element to a function and then match that specific element while traversing parent. The catch (for someone clueless like me) is that this element doesn\'t

Answer 1

Comparing JQuery objects will never return true, because each JQuery object is a a new object, even if their selectors are equal.

To compare elements, you have to check whether the DOM elements are equal:

this === element.get(0);

Answer 2

Use isEqualNode to check if two elements have the same markup

this.isEqualNode(element)

Or use isSameNode to check if two elements are the same DOM node

this.isSameNode(element)

Answer 3

You can use the jQuery is() function. The original answer can be found here.

function colorize(element) {
    element.parent().find('span').each(function() {
        if ( $(this).is(element) ) {
            $(this).css('background','yellow');
        } else {
            $(this).css('background','pink');
        }
    });
}

Answer 4

You don't have to. You're always applying the special style to one specific element, so color them all, and then change the color of the specific element.

function colorize(element) {
    element.parent().find('span').each(function() {
        $(this).css('background','pink');
    });

    element.css('background','yellow');
}

The problem with your comparison was that you were comparing two objects (jQuery objects). When comparing objects, unless they're pointing to the same thing, they are considered unequal:

var o1 = {};
var o2 = {};
o1 !== o2;

You can work around this by removing the jQuery wrapper:

function colorize(element) {
    var realElement = element[0];

    element.parent().find('span').each(function() {
        if (this === realElement) {
            $(this).css('background','yellow');
        } else {
            $(this).css('background','pink');
        }
    });
}

This way, you're comparing DOM elements to DOM elements, and not apples to oranges or objects to objects.