比较 jQuery 对象答案

【问题标题】：comparing jQuery objects比较 jQuery 对象
【发布时间】：2010-02-04 15:46:11
【问题描述】：

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

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

然后我有一个事件附加到可能在或可能不在上述对象中的项目。在该事件中，我想将触发事件的项目与 c 进行比较

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

这行不通。虽然多个 jQuery 对象可能 REFER 到同一个 DOM 对象，但它们实际上是独立的 jQuery 对象，因此永远不会比较真实。

鉴于此，有什么方法可以处理这个问题？如何拥有两个 jQuery 对象并比较它们以查看一个 jQuery 对象是否与另一个引用相同的 DOM 元素？

我可以为我尝试选择的每个项目指定一个 ID，但我想知道是否有其他方法可以解决此问题，而无需向 HTML 添加更多内容。

【问题讨论】：

标签： object comparison jquery

【解决方案1】：

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

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

【讨论】：

这很棒。我会使用 === 而不是 == 作为您的比较运算符；我们在这里测试绝对平等，而不是类型强制。

【解决方案2】：

您无法在 jQuery 包装器上进行比较，但可以在底层 DOM 节点上进行比较。损失几美元就没事了：

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

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

（我使用=== 进行比较，因为它通常是最好的，但在这种情况下它也可以与== 一起使用。）

【讨论】：

【解决方案3】：

我不知道您为什么不想要“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 数组。

【讨论】：

啊...真的。不错的主意...事实上，这可能是最简单的选择。不过，我很想知道是否可以比较 jQuery 对象中引用的 DOM 对象。
我认为您可以使用 Javascript "===" 运算符来做到这一点，但我没有尝试过，因为我从未遇到过这个问题。
=== 操作数似乎不起作用。但是您的初始 ID 只是继续并添加 ID 工作得很好。谢谢！
我绝对不会使用这种方法。生成和设置 DOM ID 是比较对象的一种非常迂回的方法。请参阅下面 Craig 的建议答案，他使用 wrapper[0] 和 wrapper.get(0)。
@nickh jQuery 本身一直在为对象创建“id”值。也就是说，直接比较 DOM 元素可能会更容易。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：