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

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

- A-OK

---

请参考以下链接：https://dev59.com/dVLTa4cB1Zd3GeqPcada - Levi Morrison

Answer 1

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

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

this === element.get(0);

- Rob W

---

@A-OK 我看到 element 也不是 DOM 元素。请使用 this === element.get(0)。 - Rob W

谢谢，这个方法可行。如果有其他人需要的话，请更新你的答案。 :) - A-OK

Answer 2

你可以使用 jQuery 的 is() 函数。原始答案可以在 这里 找到。

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

- Nikola Obreshkov

Answer 3

使用isEqualNode检查两个元素是否具有相同的标记

this.isEqualNode(element)

或者使用isSameNode来检查两个元素是否为同一DOM节点。

this.isSameNode(element)

- BrunoLM

---

请注意，a.isEqualNode(b) 不等同于 a == b。即使节点是不同的元素，document.createElement('div').isEqualNode(document.createElement('div')) 也为 true。 - Rob W

你提供的文档中并没有提到 isSameNode 已被弃用。为什么你会这么说呢？ - Danny Harding

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

- Zirak

---

是的，但这有点像hackish。 - Levi Morrison

谢谢，但是例子不是问题，只是我对问题的说明。我确实需要检查find匹配的元素是否与传递给函数的元素相同。 - A-OK

更新了。当你停止使用jQuery时，很多问题都会消失 ;) - Zirak