1

is there any way to get index of clicked div in parent div?

Here's an example:

<div class="parent">
    <div id="1" class="child"></div>
    <div id="2" class="child"></div>
    <div id="3" class="child"></div>
    <div id="4" class="child"></div>
</div>

<script>
    var parent = document.getElementsByClassName("parent");
    var child = document.getElementsByClassName("child");

    for(var i=0; i < parent.length; i++){
        parent[i].addEventListener("click", function(e){
            console.log(e.target)
            console.log(e.target.parentNode)
        });
    }
</script>

What I mean is, is there any way to get index of clicked div? For example, if I would click div with id "1", it would print "0" in console since its index is 0. If I would click div with id "2", it would print "1" in console since its index is 1, and so on.

Is there any way to do this? (without using attributes)

talaing
  • 51
  • 7
  • 1
    Your code doesn't really demonstrate what you're talking about because you're looping through `parent` elements, and not `child` elements. I suggest using `var parent = document.querySelector('.parent'); var children = parent.querySelectorAll('.child');` then loop through `children` There are ways of doing this (making `children` an array using `var kids = Array.from(children)` and using `console.log(kids.indexOf(e.target))`, but the question is, why do it that way rather than when you are adding the child elements themselves, via attributes? – Heretic Monkey Mar 23 '21 at 21:19
  • Does this answer your question? [Get child node index](https://stackoverflow.com/questions/5913927/get-child-node-index) – 0stone0 Mar 23 '21 at 21:21
  • 1
    This smells 99% like an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). What is behind your question, what are you trying to achieve you think you need the index for? – connexo Mar 23 '21 at 21:22
  • Does this answer your question? [Is it possible to get element's numerical index in its parent node without looping?](https://stackoverflow.com/questions/4649699/is-it-possible-to-get-elements-numerical-index-in-its-parent-node-without-loopi) – Jon P Mar 23 '21 at 21:23

3 Answers3

1

Use Array.prototype.indexOf() to find the child inside it's parent.children

var child = document.getElementById('findme');
var parent = child.parentNode;

var index = Array.prototype.indexOf.call(parent.children, child);
console.log(index);
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child" id="findme"></div>
    <div class="child"></div>
</div>

Using ES6 Array.prototype.findIndex();

var child = document.getElementById('findme');
var parent = child.parentNode;

var index = Array.prototype.findIndex.call(parent.children, (c) => c === child);
console.log(index);
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child" id="findme"></div>
    <div class="child"></div>
</div>

However, this could give some issues on eg IE.

0stone0
  • 34,288
  • 4
  • 39
  • 64
0

in ES6: you can also do it using Array.from() as like below

var child = document.getElementById('findme');
var parent = child.parentNode;

const index = Array.from(parent.children).indexOf(child)


var child = document.getElementById('findme');
var parent = child.parentNode;

const index = Array.from(parent.children).indexOf(child);
console.log("finded index is ", index);
 <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child" id="findme"></div>
    <div class="child"></div>
</div>
Harsh Patel
  • 1,032
  • 6
  • 21
0

Add event listener on the document and just check whether the current element is present in the children's of the parent element.

If present, then console the index.

const parentNode = document.getElementsByClassName("parent")[0]
const children = parentNode.children;

document.addEventListener('click', (e) => {
  const index = Array.from(children).indexOf(e.target);
  if(index >= 0)  
    console.log("finded index is ", index);
});
<div class="parent">
    <div id="1" class="child">Child1</div>
    <div id="2" class="child">Child2</div>
    <div id="3" class="child">Child3</div>
    <div id="4" class="child">Child4</div>
</div>
Hritik Sharma
  • 1,756
  • 7
  • 24