javascript - 扩展 jquery 选择器返回比预期更多的数据

Question

我正在尝试扩展 jquery 选择器(这是第一次)，并且我正在尝试为与我在这个项目上一起工作的 friend 获得更具可读性和可维护性的代码。

我试图找到所有具有属性 deletable=true 的元素，所以当我在 firebug 中查找这些元素时，如下所示:

$('.wrapper[deletable="true"]')

我得到了正确的结果。

但是当我尝试将其缩短为:

$(':deletable')

所以我尝试像这样扩展 jquery 选择器:

$.extend($.expr[':'], {
    deletable: function(el) {
      return $(el).find('[deletable="true"]').length > 0
    }
  });

由于某种原因，当我在 firebug 中尝试 $(":deletable") 时，我得到了 html body mainContainer ..我也得到了可删除的元素，但是我得到了这些我不需要的额外元素，例如 body/html 元素。

我做错了什么？

Answer 1

看看您的自定义选择器在做什么:

return $(el).find('[deletable="true"]').length > 0

现在，您正在使用 :deletable 调用您的自定义选择器。这在功能上等同于 *:deletable。这意味着您的选择器正在做:

$('*').find('[deletable="true"]').length > 0

这是查找包含具有该属性的元素的所有元素，包括 body 和 html。