比较两组匹配的元素

Question

我需要比较不同的选择器是否返回相同匹配的元素集.

我来到这个简单的解决方案,一个小插件:

;(function ($) {
    $.fn.isEqual = function ($selector) {
       return this.add().get().join() === $selector.add().get().join()
    }
})(jQuery);


//e.g of usages: if($('div').isEqual($('#mydiv1,#mydiv2'))
//if($(':checkbox').isEqual($('input[type=checkbox].myclass'))
//if($('div').parents().isEqual($('body div').parents()) etc ...

现在我觉得我错过了一些东西,因为我找到的所有其他解决方案似乎都更加精细,就像这个似乎是特权的解决方案:

$.fn.sequenceEqual = function(compareTo) {
  if (!compareTo || !compareTo.length || this.length !== compareTo.length) {
    return false;
  }
  for (var i = 0, length = this.length; i < length; i++) {
    if (this[i] !== compareTo[i]) 
      return false;
    }
  }
  return true;
} 

那么,使用$ .isEqual插件会有什么不利之处呢？

Answer 1

Array的join()字符串化数组,因此您依赖于jQuery元素集的字符串化版本.DOM元素字符串化为字符串[object HTMLDivElement],所以实际上你只是比较每个jQuery对象中元素的大小,顺序和类型.

例如,

$("div:first").isEqual($("div:last"))

将永远是真的,因为两个选择器都捕获一个<div>(即,它们都串行化为" [object HTMLDivElement]"),但很少这个断言实际上是真的.

即使某些浏览器确实提供了一种在字符串表示中唯一标识元素的方法,但s 的toString行为HTMLElement并未由任何标准指定,因此您将面临跨浏览器兼容性的风险.(但是,没有浏览器这样做,所以你的代码在任何浏览器中都无法正常工作.)