How to select special attributes (prefix:name="") ?

Question

Hi,

how do I select special attributes like 'user:name' or 'city:id' using jQuery?

<div user:name="Ropstah"></div>
<span city:id="4"></div>

Javascript

//this works:
alert($('div').attr("user:name"));  // alerts 'Ropstah'

//this doesn't work:
alert($('div[user:name]').attr("user:name"));    //error
alert($('div[user\\:name]').attr("user:name"));    //error even with special character escaping...

Answer 1

If you're OK with using non-standard properties (which doesn't effect the rendering of your markup in any way.. it's pretty harmless, really) you can do this:

<div nonstandard="harmless" />

$("div[nonstandard='harmless']")

I've used this approach a few times. It doesn't hurt to be pragmatic.

Answer 2

This is a bug in jQuery.

You have two options:

• Get rid of the : and using "non standard" attributes (honestly, it's not a big deal)
• Get more verbose, or use a plugin to get the functionality anyways:

Initially, you might have to do this:

$('div').filter(function() {
    return $(this).attr('user:name') !== undefined;
}).whateverElse();

Speed wise this should be fairly close to jQuery's [] selector as that's what it's doing inside the library anyways. It is, of course, more to type every time you want to find an element that has an attribute, so you could write a plugin for it, since jQuery is awesome and lets you do this sort of thing:

$.fn.hasattr = function(attr) {
    return this.filter(function() {
        return $(this).attr(attr) !== undefined;
    });
};

Which would then let you do a much simpler:

$('div').hasattr('user:name').whateverElse();

Or if you wanted to check if the attribute was equal to something, the plugin might be:

$.fn.cmpattr = function(attr, value) {
    return this.filter(function() {
        return $(this).attr(attr) == value;
    });
};

And you could then do:

$('div').cmpattr('user:name', 'Ropstah').whateverElse();

Answer 3

Fix it:

jQuery.expr.match.ATTR = /\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+|\w+:\w+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/;
//                                                          ^^^^^^^^

---

EDIT: This is not an official fix, it appears to work quite well though.

I've had quite a few headaches caused by jQuery and its inner-workings... sometimes, I think, it's okay to get stuck in there and fix it yourself. :)