jQuery if data attribute add class

Question

I'm really new to JS and jQuery, but I try adding a class "hide" to an element if it has a data attribute with a specific string. So if "class" hat a data-rating attribute of "0.0", the class "hide" should be added. It doesn't work and I don't know why.

$(document).ready(function() {
         if ($(".class").data('rating') === ('0.0')){
         $(".class").addClass('hide');
        }
      });

Could you show the HTML of the .class element. It's likely that the value has been converted to an int or float. You may also need a loop if there are multiple elements with that class — Rory McCrossan
– Rory McCrossan, Commented Apr 15, 2020 at 12:31
(Why do people do stuff like ('0.0') to begin with? Do they really think text literals would “feel naked” or “freeze to death”, if they don’t blanket them in braces …?) — C3roe
– C3roe, Commented Apr 15, 2020 at 12:34
@CBroe like I said I'm new to JS and jQuery, I just found this line so I used it as it is. you mean the line in the html where that class is used? <span class="class" id="someID" data-rating="0.0"> — Sacha
– Sacha, Commented Apr 15, 2020 at 12:36
Does this answer your question? jQuery .data() does not work, but .attr() does — Heretic Monkey
– Heretic Monkey, Commented Apr 15, 2020 at 12:44
Important takeaway from this answer: "This is the result of a misunderstanding: data is NOT an accessor for data-* attributes. It's both more and less than that." — Heretic Monkey
– Heretic Monkey, Commented Apr 15, 2020 at 12:45

Niet the Dark Absol · Accepted Answer · 2020-04-15 12:37:26Z

1

jQuery recognises data-rating="0.0" as numeric, so when you call $(".class").data('rating') you get the number 0. Hence, strictly comparing it to any string will fail.

Additionally, your code will not behave as expected if there is more than one element with the given class.

$(".class").each(elem=>{
    const $elem = $(elem);
    if( $elem.data('rating') === 0) {
        $elem.addClass('hide');
    }
});

Or, without jQuery (and therefore immeasurably faster)...

document.querySelectorAll(".class").forEach(elem=>{
    if( parseFloat(elem.getAttribute("data-rating")) === 0) {
        elem.classList.add("hide");
    }
});

Rapid shift back to jQuery, you could also do this:

$(".class[data-rating='0.0']").addClass('hide');

... as a one-liner.

answered Apr 15, 2020 at 12:37

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

Collectives™ on Stack Overflow

jQuery if data attribute add class

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related