46

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 have an id. In the following example, I want every element to turn pink except the one clicked on that should turn yellow

function colorize(element) {
    element.parent().find('span').each(function() {
        if ($(this)===element) { // the problem is this is always false
            $(this).css('background','yellow');
        } else {
            $(this).css('background','pink');
        }
    });
}
$('span').click(function() {
    colorize($(this));
});
A-OK
  • 3,184
  • 10
  • 34
  • 42

4 Answers4

60

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);
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • 1
    @A-OK I see that `element` is not a DOM element either. Use `this === element.get(0)`. – Rob W Oct 09 '11 at 11:38
  • 1
    Thanks, that worked. Please update your answer, in case someone else needs this. :) – A-OK Oct 09 '11 at 11:43
32

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');
        }
    });
}
Community
  • 1
  • 1
Nikola Obreshkov
  • 1,698
  • 4
  • 21
  • 32
17

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)
Tofandel
  • 3,006
  • 1
  • 29
  • 48
BrunoLM
  • 97,872
  • 84
  • 296
  • 452
  • 2
    Note that `a.isEqualNode(b)` is not equivalent to `a == b`. `document.createElement('div').isEqualNode(document.createElement('div'))` is `true` even though the nodes are different elements. – Rob W Jul 04 '14 at 11:22
  • 2
    The documentation you linked to says nothing about `isSameNode` being deprecated. Why do you say it is? – Danny Harding Aug 19 '16 at 16:15
1

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.

Zirak
  • 38,920
  • 13
  • 81
  • 92