Question

我需要将一个元素传递给一个函数，然后在遍历父元素时匹配该特定元素。捕获（对于像我这样无能为力的人）是这个元素没有id。在下面的示例中，我希望每个元素都变为粉红色，除了单击的元素应该变为黄色

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

Answer 1

比较JQuery对象永远不会返回true，因为每个JQuery对象都是一个新对象，即使它们的选择器是相等的。

要比较元素，您必须检查DOM元素是否相等：

this === element.get(0);

Answer 2

使用isEqualNode

this.isEqualNode(element)

或使用isSameNode（已弃用）

this.isSameNode(element)

Answer 3

您可以使用jQuery is()功能。原始答案可以找到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

你不必。您总是将特殊样式应用于一个特定元素，因此将它们全部着色，然后更改特定元素的颜色。

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元素进行比较，而不是将苹果与橙色或对象与对象进行比较。

jQuery - 如何检查两个元素是否相同？

4 个答案: