How can I loop through some divs that share a class and apply a unique id to them?

Question

I have a set of divs that share a class name, but have no individual id. The order in which they show up in html is important and must be preserved. I need to be able to loop through the list of elements given by document.getElementsByClassName(className); and give them each a unique id in the form "tile-1" "tile-2" etc.

I thought something like this may work but I soon came to realise that this would not work:

const getTiles = document.getElementsByClassName(tileClass);
  let n = 1;
  for (e in getTiles){
    let i = "tile-" + n;  
    e.setAttribute("id", i);
    n++;
}

I was hoping it would be as easy as each element in the array having the setAttribute applied to them but I was wrong.

Any suggestions?

`e in getTiles` should be `e of getTiles`. You're setting `e` to the indexes. — Barmar, May 10 '23 at 16:52
@Pointy Thx for pointing out, must've accidentally deleted it while pasting — Tutti Frutti, May 10 '23 at 16:52
Aren't you getting an error that says that `e.setAttribute` is not a function? — Barmar, May 10 '23 at 16:53
so why is that not working? Did you look in. the developer console? — epascarello, May 10 '23 at 16:53
Did you do any basic debugging before posting here? Like adding `console.log(e)` to see why it was getting an error? — Barmar, May 10 '23 at 16:55
Try this: const newElementArray = Array.from(documentquerySelectorAll('*')); newElementArray.forEach((el, index) => el.setAttribute('id', i)); — Prerak Patel, May 10 '23 at 17:00
@Barmar yes, I did but it just said `e has no attribute id` and I didn't see that I put `in` instead of `of`. I've been doing a lot of python recently so it was probably just habit — Tutti Frutti, May 10 '23 at 17:00

score 1 · Answer 1 · answered May 10 '23 at 16:53

1

try that

let i = 1;
document.querySelectorAll('.post').forEach(el => {
  el.id = 'title-' + i;
  i++
})

<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>

answered May 10 '23 at 16:53

pier farrugia

1,520
2
2
9

1

there is no need for `i`, forEach has an index – epascarello May 10 '23 at 16:53
This is also a good solution, thanks – Tutti Frutti May 10 '23 at 16:57
@espascarello, you're right ...forEach((el,index) => {... is shorter. There were an i, so I've kept it – pier farrugia May 11 '23 at 14:08

Tutti Frutti · Answer 2 · 2023-05-10T16:58:37.593

0

As pointed out by @Barmar in the comments, I needed to use of instead of in in the for loop. Works as intended now.

edited May 10 '23 at 16:58

answered May 10 '23 at 16:57

Tutti Frutti

1
1
4

How can I loop through some divs that share a class and apply a unique id to them?

2 Answers2