扩展jquery选择器返回的数据比它应该返回的要多

Extending jquery selector returns more data than it's supposed to

本文关键字：返回 数据 jquery 选择器 扩展      更新时间：2023-09-26

我正在尝试扩展jquery选择器（第一次），我正在尝试为与我一起完成该项目的朋友获取更具可读性和可维护性的代码。

我正在尝试查找所有具有属性deletable=true的元素 因此，当我像这样在火虫中查找这些元素时：

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

我得到正确的结果。

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

$(':deletable')

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

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

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

我做错了什么？

看看你的自定义选择器在做什么：

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

现在，您将使用 :deletable 调用自定义选择器。这在功能上等效于 *:deletable 。这意味着您的选择器正在执行以下操作：

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

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

如果使用 find ，任何具有与选择器匹配的子元素都将返回 true。看来你正在尝试这样做

return $(el).is('[deletable="true"]');

您的选择器正在查找具有属性 deletable="true" 的子元素的所有元素。

相反，您可以执行以下操作：

$.extend($.expr[':'], {
    deletable: function(el) {
      return $(el).is('[deletable="true"]'); // Check if this element has the attribute
    }
  });

这将仅返回具有该属性的元素。

JSFiddle 示例

jQuery说body和html包含具有属性deletable=true的元素。我会检查attr而不是使用 find('[deletable="true"]).length因为这会计算每个 DOM 对象中的所有内容。

相关文章：