How to call a data-id inside a span using jQuery?

Question

I have this code that when using CSS it changes to a text and a box, I want to write a value inside the box using jQuery.

How do I call the data-id ?

<li id='phase1'>Create robots that are awesoma<span data-id='phase1'></span></li>

Answer 1

I'm assuming you meant "How to get data-id attribute of span ?".

You can simply get data-id attribute's value like this:

$("#phase1 span").attr("data-id")

And you can set it like this:

$("#phase1 span").attr("data-id", "new value")

Answer 2

You could use attribute selector like :

$("#phase1 span[data-id]").text("text you want here");

If you want to change the value of the data-* attributes , you could use jQuery method data() for this like :

$("#phase1 span[data-id]").data('id', 'value you want here');

 $("#phase1 span[data-id]").text(" TEXT VIA JQUERY"); console.log('Before value : '+ $("#phase1 span").data('id') ); $("#phase1 span").data('id', 'new value'); console.log('After value : '+ $("#phase1 span").data('id') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id='phase1'>Create robots that are awesoma<span data-id='phase1'></span></li> </ul> 

Answer 3

Well, you can use just .data()

$('#phase1 > span').data('id');

if will return 'phase1'