Question

我正在尝试扩展jquery选择器（第一次），我正在尝试为我的朋友提供更易读和可维护的代码，这些代码在这个项目中与我合作。

我正在尝试查找所有具有属性deletable=true的元素所以当我在这样的firebug中查找这些元素时：

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

我得到了正确的结果。

但是当我试图缩短它时：

$(':deletable')

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

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

出于某些原因，当我在firebug中尝试html body mainContainer时，我的结果中得到$(":deletable") ..我也得到了删除元素，但我得到了这些额外的元素，我不需要像身体一样/ HTML元素。

我做错了什么？

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

相反，你可以这样做：

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

这只会返回具有属性的元素。

JSFiddle Example

Answer 4

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

扩展jquery选择器返回的数据超出预期

4 个答案: