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?

Answer 1

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

---

Refer : jQuery Data vs Attr?

Answer 2

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