admin管理员组

文章数量:1431037

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...

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...
Share Improve this question edited Jun 13, 2009 at 21:13 IAdapter 65k73 gold badges187 silver badges243 bronze badges asked Jun 13, 2009 at 19:01 RopstahRopstah 17.8k26 gold badges123 silver badges199 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

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();

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. :)

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.

本文标签: javascriptHow to select special attributes (prefixnamequotquot)Stack Overflow