How to find index of an Object inside of querySelectorAll?

I need index of element inside of NodeList...

const testlul = document.querySelectorAll(".comment-box")
document.addEventListener('click', (e) => {
    if(e.target.matches(".comment-box")) {
        let targetLul = e.target;
        console.log(testlul.indexOf(targetLul))
    }
})

const testlul = document.querySelectorAll(".comment-box")
document.addEventListener('click', (e) => {
    if(e.target.matches(".comment-box")) {
        let targetLul = e.target;
        console.log(testlul.indexOf(targetLul))
    }
})

Something like this, but it does not work.

25 Replies

Jochem•2y ago

what are you trying to do?

Dovah•2y ago

Get index of that element in array, or nodeList in this case. If I have 5 elements vertically stacked, I need index of that one that I clicked. Got it!

const testlul = document.querySelectorAll(".comment-box")
document.addEventListener('click', (e) => {
    if(e.target.matches(".comment-box")) {
        let targetLul = e.target;
        let list_items = Array.from(testlul);
        console.log(list_items)
        console.log(list_items.indexOf(targetLul))
    }
})

const testlul = document.querySelectorAll(".comment-box")
document.addEventListener('click', (e) => {
    if(e.target.matches(".comment-box")) {
        let targetLul = e.target;
        let list_items = Array.from(testlul);
        console.log(list_items)
        console.log(list_items.indexOf(targetLul))
    }
})

Jochem•2y ago

I was testing too, and just noticed indexOf doesn't exist on NodeList good catch!

Dovah•2y ago

Yeah! xD Was really confusing me...

Unknown User•2y ago

Message Not Public

Jochem•2y ago

You're passing in an HTMLClickEvent, naming it image, and then searching through an array of HTMLElements from the querySelector. That's never going to find the image, and indexOf returns -1 if it can't find anything

Unknown User•2y ago

Message Not Public

Jochem•2y ago

I don't think it'll work like that either, you're comparing an HTMLEventTarget with HTMLElement, they're not quite the same, and object comparisons in Javascript don't compare the values of the objects anyway, they only return if the reference is the same

Jochem•2y ago

Unknown User•2y ago

Message Not Public

Jochem•2y ago

what do you need the index for?

Unknown User•2y ago

Message Not Public

Jochem•2y ago

do the images have ID's?

Unknown User•2y ago

Message Not Public

Jochem•2y ago

I'd probably either stick an ID on there, or maybe even better in this case, a data- attribute with the order. Then you have something very simple to compare, and there's no need to loop over the entire image array alternatively, if the img tags are all that exists in the parent element, each one will have a previousElementSibling and nextElementSibling, but I doubt they're not wrapped in something, and chaining those with parentNode gets super unreadable and janky very quickly

Unknown User•2y ago

Message Not Public

Jochem•2y ago

like this?

<div>
  <img src="" alt="1">
  <img src="" alt="2">
  <img src="" alt="3">
  <img src="" alt="4">
  <img src="" alt="5">
</div>

<div>
  <img src="" alt="1">
  <img src="" alt="2">
  <img src="" alt="3">
  <img src="" alt="4">
  <img src="" alt="5">
</div>

or like this?

<div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
</div>

<div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
</div>

Unknown User•2y ago

Message Not Public

Jochem•2y ago

Hm, so then every time you get an element, whether it's from a click event or a querySelector, it'll have the properties nextElementSibling and previousElementSibling, which if you clicked the one with alt="2" would contain the ones with 1 and 3 respectively if you store that element reference as currentImage or something, you can keep accessing either next or previous sibling and overwriting the currentImage when you push the arrow keys, or just overwriting it wholesale whenever you click another image in the list

Unknown User•2y ago

Message Not Public

Jochem•2y ago

no worries, glad to help!

Unknown User•2y ago

Message Not Public

Jochem•2y ago

pretty sure it's supposed to return null if there is none haha, nice, thanks 😄

Unknown User•2y ago

Message Not Public

Jochem•2y ago

np 🙂

Gaming

Programming

How to find index of an Object inside of querySelectorAll?