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 >
<h2>
one
</h2>
</a>
</div>
<div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;">
<a >
<h2>
two
</h2>
</a>
</div>
<div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;">
<a >
<h2>
three
</h2>
</a>
</div>
<div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;">
<a >
<h2>
foure
</h2>
</a>
</div>
<div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;">
<a >
<h2>
five
</h2>
</a>
</div>
<div style="border-radius: 12px; height: 100%; border: 1px solid #e8e8e1; overflow: hidden; background: #f1f1f1;">
<a >
<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 >
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >6</div>
</div>CodePudding user response：
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 >
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >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 >
<h2 >Item</h2>
</div>
<div >
<h2 >Item</h2>
<h2 >Item</h2>
</div>
<div >
<h2 >Item</h2>
<h2 >Item</h2>
<h2 >Item</h2>
</div>CodePudding user response：
One option is to put the parent element's children elements (HTMLCollection) into an array (can be done with the spread syntax) and then use the Array method indexOf
to find the index of the element.
document.addEventListener('click', (e) => {
if (e.target.classList.contains('same')) {
const index = [...e.target.parentElement.children].indexOf(e.target);
console.log('index: ', index);
}
});<div >
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >6</div>
</div>If you only care about the elements under the element with class container then the children could be put into an array assigned outside of the event handler instead of each time the event occurs.
const containerChildren = [...document.querySelector('.container').children];
document.addEventListener('click', (e) => {
if (e.target.classList.contains('same')) {
const index = containerChildren.indexOf(e.target);
console.log('index: ', index);
}
});<div >
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >6</div>
</div>And if all children contain the class name same then the method to query for those elements could be simplified - e.g. document.querySelectorAll('.container .same') and then the conditional for classList.contains() could be removed.
For the snippet that contains the elements with anchors with attribute : the element method .closest() can be used to find the element with class item-thumb. If such an element is found, then find the index of its parent element within the group of target elements (in the example below, a class item was applied to each <div> for simplifying styles but other approaches could be used as well).
const items = [...document.getElementsByClassName('item')];
document.addEventListener('click', (e) => {
const itemThumb = e.target.closest('.item-thumb');
if (itemThumb) {
const index = items.indexOf(itemThumb.parentElement);
console.log('index: ', index);
}
});.item {
border-radius: 12px;
height: 100%;
border: 1px solid #e8e8e1;
overflow: hidden;
background: #f1f1f1;
}<div id="modal-product-thumb-item" >
<a >
<h2>
one
</h2>
</a>
</div>
<div >
<a >
<h2>
two
</h2>
</a>
</div>
<div >
<a >
<h2>
three
</h2>
</a>
</div>
<div >
<a >
<h2>
foure
</h2>
</a>
</div>
<div >
<a >
<h2>
five
</h2>
</a>
</div>
<div >
<a >
<h2>
six
</h2>
</a>
</div>CodePudding user response：
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);
});
});