Comments on: A better data selector for jQuery https://j11y.io/snippets/a-better-data-selector-for-jquery/ Sun, 22 Mar 2015 15:39:22 +0000 hourly 1 https://wordpress.org/?v=5.0.13 By: Tobin https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-880 Fri, 16 Oct 2009 03:35:15 +0000 https://j11y.io/?p=775#comment-880 Thanks James, I’ll check it out.

]]>
By: James https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-879 Wed, 07 Oct 2009 21:11:33 +0000 https://j11y.io/?p=775#comment-879 Just a note. I’ve been testing this recently and it doesn’t appear to work well with recent releases of jQuery. I’m looking into it and will hopefully have an answer soon. For now, I suggest using the following :data solution:

jQuery.expr[':'].data = function(elem, index, m) {
 
    m[0] = m[0].replace(/:data(|)$/g, '');
 
    var regex = new RegExp('(['"]?)((?:\\\1|.)+?)\1(,|$)', 'g'),
        key = regex.exec( m[0] )[2],
        val = regex.exec( m[0] )[2];
 
    return val ? jQuery(elem).data(key) == val : !!jQuery(elem).data(key);
 
};

Its usage is as follows:

$('div').data('foo','bar');
 
// Select all elements with "foo" set to "bar":
$('*:data(foo,bar)')
 
// With quotes (for complex strings):
$('div:data("foo","b a r")');
]]>
By: Tobin https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-878 Wed, 07 Oct 2009 19:43:53 +0000 https://j11y.io/?p=775#comment-878 Has there been any more talk of this feature being added? I just found myself needing it today, and I’m having trouble adapting the initial code to work with the data: approach found in the comments.

]]>
By: Naro-1 https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-877 Wed, 19 Aug 2009 21:16:26 +0000 https://j11y.io/?p=775#comment-877 this is just awesome. exactly what i’ve been looking for ! Many thanks for this quick hack.

]]>
By: James https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-876 Sun, 26 Apr 2009 15:33:44 +0000 https://j11y.io/?p=775#comment-876 @Balazs, thanks for the links. I tried searching on Google for something similar before publishing this post but the search was fruitless. Nice plugin you’ve got there! I definitely like the idea of a prefix on the data selector, it would certainly eliminate the attribute problem. Thanks 🙂

@Kyle, I agree; from a code maintainability point of view, the previous data selector is definitely superior. Maybe we could meet halfway with a ‘:’ or even a ‘data:’ prefix like Balazs suggested? That would definitely make it more explicit:

jQuery('a[data:ABC=123]');

Plus, the new implementation ties in very nicely with Sizzle’s core and so is slightly faster than the older ‘:data()’ one. It’s really a matter of taste in the end… go with whatever seems more intuitive.

]]>
By: Balazs Endresz https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-875 Sat, 25 Apr 2009 14:58:48 +0000 https://j11y.io/?p=775#comment-875 Oops, that doesn’t work unless you modify some regex too:

var r = jQuery.expr.match.ATTR.source;
jQuery.expr.match.ATTR = new RegExp( r.substr(0,6) + "\:?" + r.substr(6) );
]]>
By: Balazs Endresz https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-874 Sat, 25 Apr 2009 14:50:39 +0000 https://j11y.io/?p=775#comment-874 Just for the record, this has been already come up on the jquery-dev list a while ago:
http://groups.google.com/group/jquery-dev/browse_thread/thread/d74e5a88b9649d24

there’s already a ticket for it as well:
http://dev.jquery.com/ticket/3586

and I also made a plugin a few months ago that does this a bit differently:
http://plugins.jquery.com/project/EnhancedAttributeSelectors

Anyway, this implementation is very elegant, and doesn’t add as much overhead as mine at all. What I would only suggest is using a prefix so there’s no ambiguity if you’re dealing with an attribute or data:

            $.expr.attrHandle[':' + key] = function(elem){
                return $(elem).attr(key) || $(elem).data(key);
            };

then you can select by data like this: $('a[:ABC=123]');

]]>
By: Jack F https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-873 Sat, 25 Apr 2009 14:35:28 +0000 https://j11y.io/?p=775#comment-873 Thanks for answering my Question James. With some thought I think I agree with Kyle, when adding the “:data” bit it is much more clear what is going on. If this feature is to be included in jQuery (I’ll vote for it!) then I think that the “:data” version should be added.

Jack.

]]>
By: Rey Bango https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-872 Fri, 24 Apr 2009 19:10:46 +0000 https://j11y.io/?p=775#comment-872 @James: Well just so you know, John Resig thought it was pretty neat when I showed it to him 🙂

]]>
By: Kyle https://j11y.io/snippets/a-better-data-selector-for-jquery/#comment-871 Fri, 24 Apr 2009 17:25:04 +0000 https://j11y.io/?p=775#comment-871 I personally think that the “:data” selector is a nicer implementation. It makes it more self evident where the variable and value are coming from. The bracket selector “[]” is a standard for specifically selecting attributes, I don’t know if it’s good to be mixing something else with that.

If I had to jump into someone elses code and they were using this, I probably would go crazy trying to figure out how they are getting values from attributes that aren’t there. I’d probably have no clue that they have this extra little snippet at the bottom of the js file somewhere.

]]>