2

I'm trying to extend jquery selector (for the first time) and I'm trying to get more readable and maintainable code for my friends which work with me on this project.

I'm trying to find all elements that have attribute deletable=true So when I look for those elements in firebug like this :

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

I get correct result.

But when I try to shorten it to :

$(':deletable')

So I tried to extend the jquery selector like this :

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

For some reason I'm getting html body mainContainer in my result when I try $(":deletable") in firebug .. I also get deletable elements but I get these extra elements which I don't need like body/html elements.

What am I doing wrong?

4

4 回答 4

1

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

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

现在，您正在使用:deletable. 这在功能上等同于*:deletable. 这意味着你的选择器正在做：

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

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

于 2013-09-06T15:28:06.653 回答
0

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

相反，您可以这样做：

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

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

JSFiddle Example

于 2013-09-06T15:29:35.653 回答
0

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

return $(el).is('[deletable="true"]');
于 2013-09-06T15:27:58.313 回答
0

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

于 2013-09-06T15:34:58.233 回答