jQuery .data() Selector

Question

This question has been asked before, but I can't find any answers that have been given since May 2010. If one or more of these answers are still relavent, I'd be happy to delete this question.

Does jQuery have a selector that will allow me to filter by values added by .data()?

Example: (see comments)

//Set IsValid data attribute on all elements that have fired the blur event
$(".txtPayment").blur(function (e) {
    if (IsCurrency($(this).val()))
        $(this).data("IsValid", true);
    else
        $(this).data("IsValid", false);

    SumPayment();
});

//Sum all payments

// I'd like to be able to select all inputs with:
// class == "txtPayment" value != "" && IsValid == true
$('.txtPayment[value!=""]').each(function ()
{
    var sum = 0;

    if ($(this).data("IsValid"))
    {
        sum += Number($(this).val());
        $(this).removeClass("textError");
    }
    else
    {
        $(this).addClass("textError");
        $("#spanSumPayment").addClass("textError");
    }
});

Is this possible without plugins?

The answers are great, but as an alternative you can make your own jQuery selectors for fun and profit. — benekastah
– benekastah, Commented Oct 6, 2011 at 16:04

Tomalak · Accepted Answer · 2011-10-06 15:06:40Z

4

Does jQuery have a selector that will allow me to filter by values added by .data()?

Almost. It has a function to do this.

$(".txtPayment").blur(function () {
    $(this).data("IsValid", IsCurrency($(this).val()) );
    SumPayment();
});

var validOnes = $('.txtPayment[value!=""]').filter(function() {
  return !!$(this).data("IsValid"));  // (!! turns anything into a Boolean)
});

answered Oct 6, 2011 at 15:06

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

James Hill Over a year ago

Nicely done, thanks. Thanks also for the optimization of my original code - concise and readable.

Tomalak Over a year ago

@JamesHill FYI You could also do things like $('.txtPayment[value!=""]').toggleClass("textError", function() { return !!!$(this).data("IsValid"); });

user400654 Over a year ago

@Tomalak why would you negate it three times instead of just once?

Tomalak Over a year ago

@Kevin: Because... why, you are right. That makes no sense. :) I'll correct it (damn, if only I could edit my older comments). — !$(this).data("IsValid"); is enough, of course.

user400654 Over a year ago

@tomalak I just thought maybe you knew something I didn't, :p

|

Alex Turpin · Accepted Answer · 2011-10-06 15:06:52Z

1

No. Why don't you want to use a plugin? You could always do something like this, using .filter:

$('.txtPayment[value!=""]').filter(function() {
    return $(this).data("IsValid");
}).each(function() { ... });

answered Oct 6, 2011 at 15:06

Alex Turpin

47.9k23 gold badges118 silver badges146 bronze badges

1 Comment

James Hill Over a year ago

I have nothing against plugins. I put that in my OP because I had already found a plugin to do it and I wanted to see if there was a "native" way to do it before I used a plugin.

user400654 · Accepted Answer · 2011-10-06 15:07:20Z

1

You can select by attributes that existed when the page loaded, such as data-id="5", however, not by data set with .data(). You can however use the .filter() method for both.

$('.txtPayment[value!=""]').filter(function(){
  return $(this).data("isValid");
})

answered Oct 6, 2011 at 15:07

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Comments

maxedison · Accepted Answer · 2011-10-06 15:08:22Z

1

No. If it's not listed here, it can't be used as a selector.

If you'd like to store all the elements with a certain piece of data in a variable, you can use filter(), for example:

var dataElements = $('.txtPayment[value!=""]').filter(function(){
    return $(this).data("IsValid");
});

answered Oct 6, 2011 at 15:08

maxedison

17.6k15 gold badges72 silver badges118 bronze badges

Comments

Christophe Marois · Accepted Answer · 2013-04-27 17:18:24Z

0

You can alternatively manually set the data attributes of an element like this in jQuery:

$(element).attr('data-test', true);

This will allow you to either access data with the data() function, like this:

$(element).data('test'); ==> true

While allowing you to select the element in jQuery/CSS like this:

element[data-test] - will only check for the data-test attribute's presence
element[data-test="true"] - will also apply a condition to the attribute selection

answered Apr 27, 2013 at 17:18

Christophe Marois

6,7541 gold badge33 silver badges35 bronze badges

Collectives™ on Stack Overflow

jQuery .data() Selector

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related