Setting data-attributes with loop? (more below)

Question

I 'd like to set a data attribute to divs created by looping though an array.

let myLibrary = [ ] //the array

for (const book of myLibrary){
    let cover = document.createElement('div')
    cover.textContent =`title: ${book.title}`
        cover.classList.add('bookStyle')     //adding class for css
        books.appendChild(cover)             //appending to class='books'
    }

adding delete buttons to books:

const addedBooks = document.querySelectorAll('.bookStyle')
    addedBooks.forEach(book => {
        book.addEventListener('click', removeBook)

    let del = document.createElement('BUTTON');
    del.classList.add('delBtn')
    del.textContent = 'x'
    book.appendChild(del)
})

I want to do something like this: (looping through childs, adding data-attribute)

for (let i = 0; i < myLibrary.length; i++){
        book.setAttribute('data-index', i)
    }

in the end, a list of "books" would look like something like this:

<div class = 'bookStlye' data-index: 0> Title of book</div>
<div class = 'bookStlye' data-index: 1> Title of book</div>
<div class = 'bookStlye' data-index: 2> Title of book</div>
<div class = 'bookStlye' data-index: 3> Title of book</div>

Any help appreciated!

What is the current result you are getting? Cause looking at the details in the question, it seems everything should work properly. — shadow-lad
– shadow-lad, Commented Apr 3, 2021 at 17:43
book is undefined in that for loop that sets the attribute. What errors do you see in dev tools console? — charlietfl
– charlietfl, Commented Apr 3, 2021 at 17:48
According to your code, since the books are stored in myLibrary, you should replace book with myLibrary[i] in the loop. Or use the forEach loop like you did with addedBooks — shadow-lad
– shadow-lad, Commented Apr 3, 2021 at 17:50

Smollet777 · Accepted Answer · 2021-04-03 17:57:29Z

3

const books = document.querySelectorAll('.bookStyle')
books.forEach((book, i) => book.setAttribute('data-index', i))

<div class='bookStyle'> Title of book</div>
<div class='bookStyle'> Title of book</div>
<div class='bookStyle'> Title of book</div>
<div class='bookStyle'> Title of book</div>

answered Apr 3, 2021 at 17:57

Smollet777

1,6461 gold badge16 silver badges15 bronze badges

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

Comments

minho-sama · Accepted Answer · 2021-04-03 18:03:51Z

0

Thanks for all the replies, this worked for me:

const books = document.querySelectorAll('.bookStyle') books.forEach((book, i) => book.setAttribute('data-index', i))

answered Apr 3, 2021 at 18:03

minho-sama

475 bronze badges

Collectives™ on Stack Overflow

Setting data-attributes with loop? (more below)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related