CODEWITHSUNDEEP
javascriptjquery
James Hill
James Hill

Reputation: 61792

jQuery .data() Selector

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?

Upvotes: 2

Views: 1477

Answers (5)

Christophe Marois
Christophe Marois

Reputation: 6719

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

Upvotes: 0

maxedison
maxedison

Reputation: 17553

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");
});

Upvotes: 1

Kevin B
Kevin B

Reputation: 95023

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");
})

Upvotes: 1

Alex Turpin
Alex Turpin

Reputation: 47776

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() { ... });

Upvotes: 1

Tomalak
Tomalak

Reputation: 338158

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

Upvotes: 4

Related Questions