在jQuery中比较DOM对象

Question

我查看了其他SO帖子似乎是同一个问题,但事实并非如此.

我有以下内容:

<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对象作为输入.所以,如果我们筛选a的对象b物体并获得相同数量的结果,我们开始那么每个对象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