比较 jQuery 中的 DOM 对象

Question

我浏览了其他似乎有相同问题的帖子，但事实并非如此。

我有以下内容：

<table>
  <tr id="first_row">
    <td><span id="first_span">item1</span></td>
    <td><span>item2</span></td>
  </tr>
  <tr id="second_row">
    <td><span>item1</span></td>
    <td><span>item2</span></td>
  </tr>
</table>

jQuery(function() {
  var $a = $("#first_row");
  var $b = $("#first_span").parents("tr");
  var $c = $("#second_row");
});

$a 和 $b 是两个不同的 jQuery 对象，但引用相同的 DOM 对象，其中 $c 是不同的 DOM 对象，但内容与 $a 和 $b 相同。如何比较它们以使 $a 等于 $b 但不等于 $c？谢谢。

注意：我对 jQuery 和 DOM 相当陌生，所以希望我没有犯任何概念性错误。如果有的话请随时告诉我。

Answer 1

将 DOM 对象本身（位于 jQuery 对象内的数组中）与此进行比较：

if ($a[0] === $b[0]) {
   // code for when first DOM object of each jQuery object is the same
}

or

if ($a[0] === $c[0]) {
   // code for when first DOM object of each jQuery object is the same
}

jQuery 对象本身始终是单独的对象，因此您必须查看每个 jQuery 对象内实际 DOM 数组的内容。

您可以使用上面显示的数组语法或使用 .get(x) 方法访问 jQuery 对象内的 DOM 对象。 .get() 方法有两个数组语法没有的附加功能。如果不向 .get() 传递任何参数，它将返回整个数组。如果传递像 .get(-1) 这样的负数，它会返回一个从 DOM 元素数组末尾开始计数的 DOM 对象，而不是从头开始计数。

编辑1

如果你想比较两个 jQuery 对象中的整个数组（并且可以假设数组中 DOM 对象的顺序相同），你可以通过编写代码来进行比较：

function jQuerySame(a, b)
    if (a.length != b.length) {
        return(false);
    }
    for (var i = 0; i < a.length; i++) {
        if (a.get(i) != b.get(i) {
            return(false);
        }
    }
    return(true);
}

Then, you could use:

if (jQuerySame($a, $b)) {
    // code for when all DOM elements are the same in these two jQuery objects
}

这也可以是通过 jQuery 插件机制使其本身成为 jQuery 方法。

编辑2

我刚刚发现了另一种方法来做到这一点，它是独立于顺序的并且使用 .filter() 方法更简单。

function jQuerySame(a, b) {
    return(a.length === b.length && a.length === a.filter(b).length);
}

filter 方法可以将 jQuery 对象作为输入。因此，如果我们通过 b 对象过滤 a 对象并获得与开始时相同数量的结果，则 a 中的每个对象都必须是在b中。如果b不包含a中的每个对象，那么过滤后的对象的长度会更小。在 jQuery 源代码中，如果将 jQuery 对象传递给 filter() 方法，它只会循环遍历一个数组，在另一个数组上调用 $.inArray() ，消除第一个中不在第二个中的对象- 从而为我们做我们的工作。

Answer 2

另一种可能性是 .is 函数： http://jsfiddle.net/pimvdb/LQgCM/1/ 。

$a.is($b); // true
$a.is($c); // false

Answer 3

您可以比较实际的 DOM 元素：

if ($a[0] === $b[0])

Answer 4

您只想比较实际的 DOM 节点，而不是 jQuery 包装器。例如，

$a[0] === $b[0]; // true
$a[0] === $c[0]; // false