1

I have the following div structure:

<div class="0">
     <div class="test"></div>
</div>
<div class="1">
     <div class="test"></div>
</div>
<div class="2">
     <div class="test"></div>
</div>
<div class="3">
     <div class="test"></div>
</div>

For example, if I hover on the 1st class: document.getElementbyClassName('test')[0], I should get index value is 0.

Edit: I'm looking for a pure JS solution

Sai
  • 21
  • 3
  • What did you try so far? – Lain Apr 29 '22 at 08:59
  • Does this answer your question? [JavaScript DOM: Find Element Index In Container](https://stackoverflow.com/questions/11761881/javascript-dom-find-element-index-in-container) – Lain Apr 29 '22 at 09:00
  • Note for the future, if you're looking for a pure JS solution do not tag your questions as 'jQuery' – Rory McCrossan Apr 29 '22 at 09:20

3 Answers3

1

You can use the following code:

$('.test').mouseenter(function() {
  console.log("index: " + $(this).index('.test'));
})


$('.test').mouseenter(function() {
  console.log("index: " + $(this).index('.test'));
})
.test {
  height: 100px;
  width: 100px;
  border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
1

To do this in pure JS you can use querySelectorAll() to retrieve the target elements and bind a mouseenter event handler to them. Then you can find the index of the element which triggered the event by comparing it to the collection of children in the parent. Something like this:

let elements = document.querySelectorAll('.test');

elements.forEach(el => el.addEventListener('mouseenter', e => {
  let index = Array.from(elements).indexOf(e.target);
  console.log(index);
}));
<div class="1">
  <div class="test">Test 1</div>
</div>
<div class="2">
  <div class="test">Test 2</div>
</div>
<div class="3">
  <div class="test">Test 3</div>
</div>
<div class="4">
  <div class="test">Test 4</div>
</div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • `
    Test 1
    ` `
    Test 2
    ` `
    Test 3
    ` `
    Test 4
    ` Thanks! but what if class='test' is child of different parents. Then how to find the index ?     – Sai Apr 29 '22 at 09:36
  • In that case you could use the `elements` collection directly, although note that this will only work if you have a single group of `.test` elements. – Rory McCrossan Apr 29 '22 at 09:59
  • Thank you! so much Rory, It's working fine . – Sai Apr 29 '22 at 10:05
-1

This code Use pure java script :

    var divItems = document.querySelectorAll(".test");
    var mytab = [];
    var index = 0;
    for (let i = 0; i < divItems.length; i++) {
      mytab.push(divItems[i].innerHTML);
    }

    for (var i = 0; i < divItems.length; i++) 
    {
      divItems[i].onmouseover = function () 
      {
         index = mytab.indexOf(this.innerHTML);
         console.log(this.innerHTML + " Index = " + index);
      };
    }
<div class="test">Hover me 1</div>
<div class="test">Hover me 2</div>
<div class="test">Hover me 3</div>
<div class="test">Hover me 4</div>
Anonymous
  • 539
  • 2
  • 6