How exactly do I get the index of e.target? IndexOf wont work and I dont want to use the Array.prototype property. So what is the best way to get the index of the target element?

Basically element is a container with a bunch of divs. If I hover over a div I want to get its index.

element.addEventListener("mouseover", someEvent, false);


function someEvent(e) {
    if (e.target !== e.currentTarget) {
        // get the index of the hovered element here
    }
    e.stopPropagation();
}

I explicitely stated that I dont want to use Array.prototype so the link is not a duplicate.

By the way, here a jsfiddle /

How exactly do I get the index of e.target? IndexOf wont work and I dont want to use the Array.prototype property. So what is the best way to get the index of the target element?

Basically element is a container with a bunch of divs. If I hover over a div I want to get its index.

element.addEventListener("mouseover", someEvent, false);


function someEvent(e) {
    if (e.target !== e.currentTarget) {
        // get the index of the hovered element here
    }
    e.stopPropagation();
}

I explicitely stated that I dont want to use Array.prototype so the link is not a duplicate.

By the way, here a jsfiddle https://jsfiddle/nbjve593/

• javascript

• 4 Get the index in relation to what exactly ? – adeneo Commented Feb 13, 2016 at 19:50
• @adeneo I thought the code makes it clear. Basically element is a container with a bunch of divs. If I hover over a div I want to get its index. – Asperger Commented Feb 13, 2016 at 19:53
• 2 ...of the what now? So the index in relation to what then, when using the "bubbling effect" ? – adeneo Commented Feb 13, 2016 at 19:56
• 1 Possible duplicate of JavaScript DOM: Find Element Index In Container – Asons Commented Feb 13, 2016 at 19:57
• 2 Can you please show your HTML? That way we can see what you're trying mouse-over, and the element(s) of which you're trying to find the index. As it is you're trying to explain code to us, as well as explaining your intent//requirement. Reduce your work: show us your minimal reproducible example code. Also, why don't you want to use Array.prototype.slice.call()? If you can explain the requirements that might help us to provide better answers (although, admittedly, sometimes using an approach you don't want to use remains the best way, but not always). – David Thomas Commented Feb 13, 2016 at 19:59

2 Answers 2

As the mouseover event doesn't have an index property and you don't want to use Array.prototype methods, here is an alternative

var els = document.querySelectorAll('#container-id div');

for(i=0; i < els.length; i++) {

  els[i].index = i;

  els[i].addEventListener('mouseover', function(e) {
    
    e.target.innerHTML = e.target.index;

  }, false);
}

#container-id div {
  background: yellow;
  margin: 10px;
  height: 20px;
}

<div id="container-id">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Update

If you have thousands of child elements you might want Array.prototype.indexOf anyway.

This version use children instead of childNodes, to avoid getting all the text nodes.

var el = document.getElementById('container-id');

  el.addEventListener('mouseover', function(e) {
    
    var p = e.target.parentElement;
    var index = Array.prototype.indexOf.call(p.children, e.target);
    
    if (e.target !== el) {
      e.target.innerHTML = index;
    }

  }, false);

#container-id div {
  background: yellow;
  margin: 10px;
  height: 20px;
}

<div id="container-id">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Initial source: Finding DOM node index

Use in the table element what you want to use. When you use the table element, you have the index of the column or row in the table in the DOM.