Using .data to add data attribute using jQuery

Question

I have two spans on my site:

<span class="view-toggle"></span>

And I'd like to firstly set data-status="inactive" (to clear it of any settings), and then add data-status="active" to one element.

I have the following:

$('.view-toggle').find().data("status","inactive");
$(button).data( "status", "active");

I can confirm that $(button) correctly identifies the one span that I want to add active to.

I'm not getting any console errors, but I'm also not getting the addition of any data attributes.

Am I using data() incorrectly?

What's with the .find() without a selector? From the documentation: Unlike most of the tree traversal methods, the selector expression is required in a call to .find(). — Andreas
– Andreas, Commented Aug 23, 2016 at 18:11

Community · Accepted Answer · 2017-05-23 12:16:32Z

2

The find() method doesn't make any sense in your code just remove that.

$('.view-toggle').data("status","inactive");
$(button).data("status", "active");

Use attr() method if you want to reflect the attribute value in HTML code.

$('.view-toggle').attr("data-status","inactive");
$(button).attr("data-status", "active");

CommunityBot

11 silver badge

answered Aug 23, 2016 at 18:10

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

2 Comments

OK, so how does one correctly use .data() - is this not the use for it?

Akshay Chawla · Accepted Answer · 2016-08-23 19:06:33Z

0

There is no use of .find() , without any selector.

To set any attribute use .attr("attr-name","attr-value"); And to get the attr value use .data("data-status");

answered Aug 23, 2016 at 19:06

Akshay Chawla

6131 gold badge8 silver badges17 bronze badges