比较jQuery对象

Question

我正在使用选择器来获取一组对象（0个或多个）：

var $openMenus = $Triggers.filter(".trigger-hover");

我有一个与某个可能在上面的对象中的项目相关联的事件。在该事件中，我希望将触发事件的项目与 c 进行比较。

$([selector])
    .focus(function(){
        var $thisMenu = $(this);
        $openMenus.each(function(){
            if ($(this) != $thisMenu ){ 
                [do something]
            }
        }) 
    })

这样做行不通。虽然多个jQuery对象可能引用同一个DOM对象，但它们实际上是独立的jQuery对象，因此永远不会相等。

那么应该如何处理呢？如何比较两个jQuery对象，以查看一个jQuery对象是否引用与另一个相同的DOM元素？

我可以为我要选择的每个项目提供一个ID，但想知道是否有其他方法可以在不必添加更多HTML的情况下进行操作。

- DA.

Answer 1

从bobince的回复中继续，不要使用wrapper[0]，而是使用正确的get(0)方法来返回存储在jQuery对象中的第一个元素。

跟随bobince的建议，不要使用wrapper[0]，而是使用正确的get（0）方法返回存储在jQuery对象中的第一个元素。

var focused = null;  
$(':input').focus( function() {  
   focused = $(this);  
   compare($(this)); 
   //Compare them...trivial but will return true despite being different jQuery objects.
}).blur( function() {           
   focused = null; 
});

function compare(element) {
   if (element.get(0) === focused.get(0)) {
      alert('The same');
   }
}

- Craig

---

这很好。不过我会使用 === 而不是 == 作为比较运算符；因为我们在这里测试的是绝对相等性，而不是类型强制转换。 - thismax

Answer 2

你不能在jQuery包装器上进行比较，但可以在底层DOM节点上进行比较。失去一些钱，你就没问题了：

.focus(function(){
    var that= this;
    $openMenus.each(function(){
        if (this!==that){ 
            [do something]
        }
    });
})

（或使用例如wrapper [0]从单项jQuery包装器中获取DOM节点。）

（我在比较中使用了 === ，因为通常最好，但在这种情况下也可以使用 == 。）

- bobince

Answer 3

要比较DOM元素，您应该比较原始元素，它作为数组中的第一个元素可用，例如：$（'.test'）[0]。

因此，在您的情况下，代码应如下所示：

$([selector])
 .focus(function(){
    var $thisMenu = $(this);
    $openMenus.each(function(){
        if ($(this)[0] != $thisMenu[0]){ 
            [do something]
        }
    }) 
})

- Nikita Koksharov

Answer 4

我不知道你为什么不想要 "id" 值，但是如果原始 HTML 中缺少这些值，你可以随时编写一个小的 jQuery 插件来为元素提供唯一的 "id" 值。

jQuery.fn.setId = (function setupSetId() {
  var counter = 0; // or maybe new Date().getTime()
  return function setId() {
    return this.each(function setIdInternal() {
      var $self = jQuery(this);
      if (!$self.attr('id')) $self.attr('id', '_' + counter++);
    });
  };
})();

然后您可以编写另一个实用程序，通过元素ID比较jQuery数组。

- Pointy

---

啊...不错的主意，其实这可能是最简单的选择。但我仍然想知道是否可以在 jQuery 对象中比较引用的 DOM 对象。 - DA.

我认为你可以使用Javascript的"==="运算符来实现，但我从未遇到过这个问题，所以没有尝试过。 - Pointy

三等号运算符似乎不起作用。但是您最初的想法直接添加ID就可以正常工作。谢谢！ - DA.

我绝对不会使用这种方法。生成和设置DOM ID是一种非常迂回的比较对象的方法。请参见下面Craig建议的答案，他使用了wrapper[0]和wrapper.get(0)。 - nickh

@nickh jQuery本身经常为对象创建“id”值。话虽如此，直接比较DOM元素可能会更容易。 - Pointy

Answer 5

你可以使用jQuery中的.siblings()函数来解决这个问题。这样你就可以避免比较对象了。

$(this).mouseenter(
    function(){
        //use functions you want to replace "someFunctionHere"
        $(this).siblings().find('ul').someFunctionHere();
        //do something else...
    }
);

- Eagle

Answer 6

jQuery对象不能直接进行比较，但可以通过使用.add()或.not()操作轻松实现：

var $thisMenu = $(this);
$openMenus.each(function(){
   if ($(this).add( $thisMenu ).length == 1 ){ 
       [do something]
   }
}) 

或者

var $thisMenu = $(this);
$openMenus.each(function(){
   if ($(this).not( $thisMenu ).length == 0 ){ 
       [do something]
   }
}) 

- Thomas