jquery data selector

Question

I'm trying to use a jquery data selector to add/remove a class to an element.

$("#side_categories .testbox").click(function () {
    var category = $(this).data('category'); //get the category from the clicked button

    if ($('#side_categories .testbox').hasClass('activated')) {
        //otherInput is the hidden text input
        $('#listings .deals:data("category"="+category+")').removeClass('activated');
    } else {
        $('#listings .deals:data("category"="+category+")').addClass('activated');
    }
});

In my test box I have data-category set on each trigger to pass it over. The category going into data-category is filled in via php.

Can't seem to get this to work, have been seeing errors like:

regular expression too complex
[Break On This Error] while (m = matcher.exec(expr)) {

or when I'm using the older function written by james padolsey, i get the following:

uncaught exception: Syntax error, unrecognized expression: data

I just want to be able to add/remove classes from LI's based on checkbox selections.

Many thanks in advance!

Naftali · Answer 1 · 2011-08-31T22:03:40.093

6

Make it so you can filter by the data value:

$('#listings .deals').filter(function(index) {
    return $(this).data('category') == category;
}).removeClass('activated');

.filter() in jQuery doc

WORKING CODE:

$("#side_categories .testbox").click(function () {
    var category = $(this).data('category'); //get the category from the clicked button
    var these_deals = $('#listings .deals').filter(function (index) {
            return $(this).data('category') == category;
        });
    $('#listings .deals').removeClass('activated');
    if (these_deals.hasClass('activated')) {
        //otherInput is the hidden text input
        these_deals.removeClass('activated');
    } else {
        these_deals.addClass('activated');
    }
});

Fiddle: http://jsfiddle.net/maniator/CcfwX/

edited Aug 31 '11 at 22:03

answered Aug 31 '11 at 21:07

Naftali

144,921
39
244
303

huge thanks for this! 95% sure its my own error, but i couldn't get this to work – Mike Aug 31 '11 at 21:33
@Mike -- what are the errors that you have on the page? Can you put you code into a http://jsfiddle.net demo? – Naftali Aug 31 '11 at 21:36
I wasn't getting any error, just nothing was happening. and firebug didn't report anythign at all – Mike Aug 31 '11 at 21:38
@Mike can I see your sample code? (with html, maybe it isnt selecting properly) – Naftali Aug 31 '11 at 21:39
yes! thank you! seems i dont have enough reputation here to vote on things. but again, huge thanks to everyone! – Mike Aug 31 '11 at 21:51
@Mike -- please select an accepted answer. and you can **always** vote up! :-) – Naftali Aug 31 '11 at 21:53
@Mike -- you are the question asker -- select an accepted answer by clicking the checkmark next to the answer. – Naftali Aug 31 '11 at 21:55
@Neal Thank you - I was having a bit of a struggle with some of my JS and your solution pointed me in a right direction and got my JS working based on yours. – Xander Mar 19 '13 at 21:57

score 2 · Answer 2 · answered Aug 31 '11 at 21:02

2

jQuery doesn't have a native :data() selector. You will need to explicitly define it on $.expr[':'].data, or use a plugin that adds it as a selector.

answered Aug 31 '11 at 21:02

zzzzBov

174,988
54
320
367

you can select it with `.filter()`, see my answer. – Naftali Aug 31 '11 at 21:11

Dan Ellis · Accepted Answer · 2011-08-31T21:23:27.157

0

Would something like this work instead?

$("#side_categories .testbox").click(function () {
    var category = $(this).data('category'); //get the category from the clicked button
    $('#listings .deals[data-category*="' + category + '"]').toggleClass('activated');
});

edited Aug 31 '11 at 21:23

answered Aug 31 '11 at 21:11

Dan Ellis

5,537
8
47
73

far as i understood, "data-category" was part of the .data api which should read the -category – Mike Aug 31 '11 at 21:18
yes, but as @zzzzBov said, because there's no `:data()` selector, the above solution would be an alternate :) something similar was suggested in: http://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value – Dan Ellis Aug 31 '11 at 21:30
YESSS!!! thank you! huge thanks to everyone for their input! so far this has been a few hours of unnecessary headaches! :) – Mike Aug 31 '11 at 21:31
I was following http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/ as well as the updated functions/plugins but the above code did the trick! :) – Mike Aug 31 '11 at 21:32
btw, it's customary to mark the proposed solution that resolved your issue as the answer to your original question :) – Dan Ellis Aug 31 '11 at 21:46
what do u do in an event when both solutions work? feels somewhat awkward lol – Mike Aug 31 '11 at 21:56
@Mike i usually select the one that i am going to actually use. – Naftali Aug 31 '11 at 21:57

score -2 · Answer 4 · answered Aug 31 '11 at 21:05

Try using single instead of double quotes around category, like this:

...
$('#listings .deals:data("category"='+category+')').removeClass('activated');
} else {
$('#listings .deals:data("category"='+category+')').addClass('activated');
...

If that doesn't work, try various combinations of adding and removing double quotes, like this, for instance:

...
$('#listings .deals:data(category="'+category+'")').removeClass('activated');
} else {
$('#listings .deals:data(category="'+category+'")').addClass('activated');
...

I'm not an expert at jQuery selectors, but you seem to be trying to use the variable category, rather than the string "+category+", in your selector, which your current code isn't doing, since the selector is surrounded by single quotes rather than double quotes.

jquery data selector

4 Answers4