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?

Take a look at what your custom selector is doing:

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

Now, you're invoking your custom selector using :deletable. This is functionally equivalent to *:deletable. This means that you're selector is doing:

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

Which is finding all elements that contain an element with the attribute, including body and html.

more