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, Aug 23 '16 at 18:11

score 2 · Answer 1 · edited May 23 '17 at 12:16

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

edited May 23 '17 at 12:16

Community

answered Aug 23 '16 at 18:10

Pranav C Balan

OK, so how does one correctly use `.data()` - is this not the use for it? – user1486133 Aug 23 '16 at 18:12
@user1486133 : see the difference http://stackoverflow.com/questions/7261619/jquery-data-vs-attr – Pranav C Balan Aug 23 '16 at 18:14

score 0 · Answer 2 · answered Aug 23 '16 at 19:06

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 '16 at 19:06

Akshay Chawla

2 Answers2