How to set data attribute with Jquery

Question

I am building a script to create a table of content dynamically, I am setting the dataset attribute on each header and creating a li element with the name of this header, but I also need to insert a data attribute on my li item, this is not working

  function createSummary() {
    const summary = $('#summary')
    for (let i = 0; i < headers.length; i++) {
        let header = headers[i]
        header.dataset.header = i
        $('<li/>', {
            text: header.innerText,
            // HERE IS WHERER I NEED HELP
            data: {'to': i},
        }).appendTo(summary);
    }
}

i also tried to put right before the appendTo }).data({'to': i}).appendTo(summary);

please give one example of such li which you want to create. — Sanskar Bansal
– Sanskar Bansal, Commented Aug 13, 2021 at 18:27

HelpingHand · Accepted Answer · 2021-08-13 18:29:10Z

2

https://api.jquery.com/attr/#attr2

Use the .attr method

 function createSummary() {
    const summary = $('#summary')
    for (let i = 0; i < headers.length; i++) {
        let header = headers[i]
        header.dataset.header = i
        $('<li/>', {
            text: header.innerText,
            // HERE IS WHERER I NEED HELP
            //data: {'to': i},
        }).attr('data-to', i).appendTo(summary); //<-- here is the change
    }
}

answered Aug 13, 2021 at 18:29

HelpingHand

1,06511 silver badges27 bronze badges

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

3 Comments

Juan Andrade Over a year ago

Thx man, that worked well, but you know how to explain why the .data() on the end didn't worked?

HelpingHand Over a year ago

@Dosbodoke No prob. I'm not sure actually. It would seem that using .data should have the same effect. Maybe a jquery expert on here might know

HelpingHand Over a year ago

@Dosbodoke Try using the .data(key, value) rather than the .data({object Object}). Maybe it's something with the formatting of that

Alias Cartellano · Accepted Answer · 2021-08-13 18:48:02Z

0

You could try using attr() instead. (See how to add attributes in jquery)
Also check out HTML li data-* attribute.

answered Aug 13, 2021 at 18:48

Alias Cartellano

3621 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to set data attribute with Jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related