39

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,054
  • 10
  • 33
  • 42

4 Answers4

53

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
  • 328,606
  • 78
  • 779
  • 666
  • 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
31

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,618
  • 4
  • 20
  • 31
16

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
  • 2,279
  • 1
  • 21
  • 45
BrunoLM
  • 94,090
  • 80
  • 289
  • 441
  • 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
  • 37,288
  • 12
  • 78
  • 90