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

Answer 1

比較 JQuery 對象永遠不會返回 true，因為每個 JQuery 對象都是一個新對象，即使它們的選擇器相等。

要比較元素，您必須檢查 DOM 元素是否相等：

this === element.get(0);

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

Answer 3

使用isEqualNode檢查兩個元素是否具有相同的標記

this.isEqualNode(element)

或者使用isSameNode檢查兩個元素是否是同一個 DOM 節點

this.isSameNode(element)

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 元素進行比較，而不是將蘋果與橙子或對象與對象進行比較。