-1

I want to get the index value of the div which has been clicked. I have 6 divs. When I click on them using e.target from the whole document, I want to get the index position of the clicked one from the 6 divs

 const myall = Array.from(document.querySelectorAll('.same')); const thum_container = Array.from(document.querySelectorAll('.item-thumb')); document.addEventListener('click', (e) => { if(e.target.classList.contains('item-thumb')){ alert('lets see ' + thum_container.indexOf(e.target)); } }); 
<div id="modal-product-thumb-item" style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;"> <a class="item-thumb"> <h2> one </h2> </a> </div> <div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;"> <a class="item-thumb"> <h2> two </h2> </a> </div> <div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;"> <a class="item-thumb"> <h2> three </h2> </a> </div> <div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;"> <a class="item-thumb"> <h2> foure </h2> </a> </div> <div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;"> <a class="item-thumb"> <h2> five </h2> </a> </div> <div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;"> <a class="item-thumb"> <h2> six </h2> </a> </div>

I want to get the index value of the div which has been clicked. I have 6 divs, when I click on them using e.target from the whole document, I want to get the index position of the clicked one from the 6 divs

const myall = document.querySelectorAll('.container'); document.addEventListener('click', (e) => { if(e.target.classList.contains('same')){ myall.forEach((eachitem, eachindex) => { eachitem.addEventListener('click', () => { alert('lets see ' + eachindex); }); }); } });
<div class="container"> <div class="same">1</div> <div class="same">2</div> <div class="same">3</div> <div class="same">4</div> <div class="same">5</div> <div class="same">6</div> </div>

Improve this question
3
  • 1
    I think you could apply stackoverflow.com/questions/378365/finding-dom-node-index to get the index of the element. I don't think there's a native call for getting the index so it needs one of those helpers to figure it out through traversal. Commented Apr 12, 2022 at 15:47
  • e.target.textContent will return the numbers if that's what you ment Commented Apr 12, 2022 at 15:47
  • Does this answer your question? Get child node index Commented Apr 12, 2022 at 17:29

2 Answers 2

Reset to default
2

Just get an Array of the desired div elements and then use indexOf to find the index of the clicked element.

const myall = Array.from(document.querySelectorAll('.container .same')); document.addEventListener('click', (e) => { if(e.target.classList.contains('same')){ console.log(myall.indexOf(e.target)); } });
<div class="container"> <div class="same">1</div> <div class="same">2</div> <div class="same">3</div> <div class="same">4</div> <div class="same">5</div> <div class="same">6</div> </div>

Here is the same solution using the code from your Fiddle with additional elements so you can see that it works regardless of the number of elements:

document.addEventListener('click', (e) => { if(e.target.classList.contains('item-thumb')){ // Get an array of just the elements in this container const items = Array.from(e.target.closest("div.modal-product-thumb-item").querySelectorAll(".item-thumb")); alert('lets see ' + items.indexOf(e.target)); } });
div.modal-product-thumb-item { border-radius: 12px; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1; margin-bottom:3px; }
<div class="modal-product-thumb-item"> <h2 class="item-thumb">Item</h2> </div> <div class="modal-product-thumb-item"> <h2 class="item-thumb">Item</h2> <h2 class="item-thumb">Item</h2> </div> <div class="modal-product-thumb-item"> <h2 class="item-thumb">Item</h2> <h2 class="item-thumb">Item</h2> <h2 class="item-thumb">Item</h2> </div>

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

18 Comments

its working in this example, but in my another case, I have e.target.closest('#quick-shop-desktop .item-thumb')){ const myall = document.querySelectorAll('.item-thumb'); when I click on the element, it is giving the value -1 every time
Can you post that code as a minimal reproducible example?
@Leith Your problem in the Fiddle is that you are including a . in your classList.contains() code. contains assumes you are working with a class, so no . is used.
@Leith Also, you shouldn't be using a elements if you aren't navigating anywhere. The classes should be placed on the h2 elements. See this forked Fiddle which works.
@Leith That is a different issue than what your question here is asking about. I have shown and explained how to solve the question you posted with simple code. Please consider marking this as the answer and then post a new question about your array.
|
0

The easiest way to do this is to target all elements first. Loop through them and add a listener.

const myall = document.querySelectorAll('.container .same'); myall.forEach((element, index) => { element.addEventListener('click', (e) => { console.log('div text',e.target.textContent); console.log('index of the div', index); }); });
Improve this answer

6 Comments

That certainly isn't the "easiest" way. Mostly because it doesn't do what the OP is asking. She wants the index of the element within the group, not the contents of the element. And, there's no need for each element to have its own event handler. See my answer.
same, I do the same ealier, but what is happening is, on the first click, nothing happens, but on secnd click there is 1 console log of the index, and on second click there are 2 consolelog of the index, and the number keeps increasing as there are click?
@ggorlen Adding a loop and setting up individual event handlers is resource intensive and complicates the code unnecessarily. Event delegation is the way to go for a problem like this and as you can see from my answer, it's far simpler with less processing and memory implications.
@ScottMarcus Event delegation gives better performance, yes, but that doesn't mean other answers need to be downvoted
@tiborK I down voted because this answer is unnecessarily involved and less performant. It's not a good solution to the problem and one that would certainly come under scrutiny in a code review. Those kinds of answers certainly do warrant a down vote.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.