What useful custom jQuery selectors have you written?

Question

For me, one of the best, yet under-utilised feature of jQuery is the custom selector. I have a fairly trivial example of this, to pick out all text boxes that are empty:

$(document).ready(function() {
    $.extend($.expr[':'], {
        textboxEmpty: function(el) {
            var $el = $(el);
            return ($el.val() == "") && ($el.attr("type") == "text");
        }
    });
});

And to call:

alert($(":textboxEmpty").length);

I was wondering, really, if anyone else had some useful examples of custom selectors they have written.

I am, of course, not blind to the pitfalls of these, and realise that they can be quite slow and, as such, should be combined with other faster selectors. It would be useful to hear if there are any other problems we should be aware of.

I never needed to write a custom selector because jQuery is already robust enough — Josh Stodola, Dec 21 '09 at 15:52
@Josh: I'm not quite sure, if you understood this feature of Sizzle (jQuery's selector engine). — Boldewyn, Dec 21 '09 at 17:00

score 10 · Accepted Answer · edited May 23 '17 at 11:53

10

I haven't written any, yet James Padolsey has a great collection of selector plug-ins (for elements in view, for external links, for elements with a specific .data property, etc)

edited May 23 '17 at 11:53

Community

1
1

answered Dec 21 '09 at 15:42

Alex Gyoshev

11,929
4
44
74

Tim Banks · Answer 2 · 2009-12-21T16:30:01.960

3

If you are using ASP.NET, this selector will help you find server controls by id:

$.expr[":"].asp = function(a, i, m) {
    return $(a).attr('id') && $(a).attr('id').endsWith(m[3]);
};

If you had a server control that looked like

<asp:TextBox runat="server" ID="txtPhoneNumber" />

You could access it like this

$(":asp(txtPhoneNumber)")

EDIT

Forgot to add the endsWith extension

String.prototype.endsWith = function(str) {
    return (this.match(str + '$') == str);
};

edited Dec 21 '09 at 16:30

answered Dec 21 '09 at 15:39

Tim Banks

7,099
5
31
28

Like it! Not quite sure what the i and m on the function parameters are for. – James Wiseman Dec 21 '09 at 15:43
I think `i` is for index, don't quote me on that though. – Sneakyness Dec 21 '09 at 15:53
Sneakyness is correct, i is for index. The m returns an array which in this case would return [":asp(txtPhoneNumber)", "asp", "", "txtPhoneNumber"] so I am using m[3] to get the id that I passed in – Tim Banks Dec 21 '09 at 16:32
Why does ASPNET need a different id-based selector? Is it the case that the ID within the .aspx file is not the same as the resulting ID within the generated .html file? – Cheeso Dec 21 '09 at 23:07
1

@James Wiseman: http://jquery-howto.blogspot.com/2009/06/jquery-custom-selectors-with-parameters.html – Mathias Bynens Jan 19 '10 at 14:58

score 0 · Answer 3 · edited May 23 '17 at 12:25

0

As custom selectors are suggested on stackoverflow I'll add them here

Select 'URL' style

Selecting empty text input using jQuery

edited May 23 '17 at 12:25

Community

1
1

answered Feb 26 '10 at 16:17

James Wiseman

29,946
17
95
158

What useful custom jQuery selectors have you written?

3 Answers3

Linked