JQuery - как проверить, совпадают ли два элемента?

Мне нужно передать элемент в функцию, а затем сопоставить этот конкретный элемент при обходе родителя. Уловка (для кого-то невежественного, подобного мне) заключается в том, что у этого элемента нет идентификатора. В следующем примере я хочу, чтобы каждый элемент становился розовым, за исключением того, что один щелчок на нем должен быть желтым.

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));
});

Ответ 1

Сравнение объектов JQuery никогда не вернет true, потому что каждый объект JQuery является новым объектом, даже если их селекторы равны.

Чтобы сравнить элементы, вы должны проверить, являются ли элементы DOM равными:

this === element.get(0);

Ответ 2

Используйте isEqualNode

this.isEqualNode(element)

Или используйте isSameNode (устаревший)

this.isSameNode(element)

Ответ 3

Вы можете использовать функцию jQuery is(). Оригинальный ответ можно найти здесь.

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

Ответ 4

Вам не обязательно. Вы всегда применяете особый стиль к одному конкретному элементу, поэтому покрасьте их все, а затем измените цвет конкретного элемента.

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

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

Проблема с вашим сравнением заключалась в том, что вы сравнивали два объекта (объекты jQuery). При сравнении объектов, если они не указывают на одно и то же, они считаются неравными:

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

Вы можете обойти это, удалив оболочку jQuery:

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');
        }
    });
}

Таким образом, вы сравниваете элементы DOM с элементами DOM, а не яблоки для апельсинов или объектов для объектов.