Mouse Event log… is there a reference to the position an element has in relation to its parent?

Question

I’ve spent the last couple of hours going thru the Mouse e (Event Log) in console, trying to find some reference to the position of the li that was clicked on in relation to the parent ul element.

By that I mean if I click on li 4 is there some thing that I can reference that tells me that it is the 5th li in the ul?

I would prefer to access the position without adding a attribute data-src=”5” and then getting the position that way but I thought I would ask before I go down that road…

It seems that the event captures everything but I just cant find li[5] that i'm looking for it in the events list. Thanks for any help - CES

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Working </title>
    <style>
        ul{width:450px; margin:auto;}
        li {float:left;cursor:pointer;}
        div{width:150px; height:150px;}
    </style>
    <script>
        function init() {
            var objList = document.querySelector("#id_ScrollToNav")
            console.log(objList);
            objList.addEventListener('click', function (e) {
                console.log(e);
                e.stopPropagation();
            }, false);
        }
    </script>
</head>
<body onload="init()">
    <header>
        <nav id="frameNavBox">
            Some Nav stuff
        </nav>
    </header>
    <main>
        <ul id="id_ScrollToNav">
            <li><div>0</div></li>
            <li><div>1</div></li>
            <li><div>2</div></li>
            <li><div>3</div></li>
            <li><div>4</div></li>
            <li><div>5</div></li>
            <li><div>6</div></li>
            <li><div>7</div></li>
            <li><div>8</div></li>
        </ul>
    </main>
</body>
</html>

Possible duplicate of [Get child node index](https://stackoverflow.com/questions/5913927/get-child-node-index) — Rehan Haider, Dec 18 '17 at 18:32
Possible duplicate of https://stackoverflow.com/questions/4032654/get-list-item-index-in-html-ul-list-using-javascript — Souleste, Jul 26 '19 at 19:05

score 1 · Answer 1 · answered Dec 18 '17 at 18:52

Try this it prints the position of li in ul

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Working </title>
    <style>
        ul{width:450px; margin:auto;}
        li {float:left;cursor:pointer;}
        div{width:150px; height:150px;}
    </style>
    <script>
        function init() {
            var objList = document.querySelector("#id_ScrollToNav")
            console.log(objList);
            objList.addEventListener('click', function (e) {
                var li = e.target.closest('li');
                var parent = li.parentNode;
                var index = Array.prototype.indexOf.call(parent.children, li);
                console.log((index + 1) + 'th element selected');
                e.stopPropagation();
            }, false);
        }
    </script>
</head>
<body onload="init()">
    <header>
        <nav id="frameNavBox">
            Some Nav stuff
        </nav>
    </header>
    <main>
        <ul id="id_ScrollToNav">
            <li><div>0</div></li>
            <li><div>1</div></li>
            <li><div>2</div></li>
            <li><div>3</div></li>
            <li><div>4</div></li>
            <li><div>5</div></li>
            <li><div>6</div></li>
            <li><div>7</div></li>
            <li><div>8</div></li>
        </ul>
    </main>
</body>
</html>

For more experiments use this fiddle. For other possible methods please have a look at this question

score 0 · Answer 2 · answered Dec 18 '17 at 18:43

Just log the innerhtml of the li element, although you will need an id for each li element. then create a function that finds the innerHTML of the li that you clicked on by it's ID.

function clickThis(id) {
  const list = document.getElementById('list');
  const li = document.getElementById(id);
  console.log(li.innerHTML);
}

li {
  cursor: pointer;
}

<!DOCTYPE>
<html>
  <head>
  </head>
  <body>
    <ul id="list">
      <li id="zero" onclick="clickThis('zero')">0</li>
      <li id="one" onclick="clickThis('one')">1</li>
      <li id="two" onclick="clickThis('two')">2</li>
      <li id="three" onclick="clickThis('three')">3</li>
      <li id="four" onclick="clickThis('four')">4</li>
      <li id="five" onclick="clickThis('five')">5</li>
    </ul>
  </body>

</html>

Which is great, so long as the OP is using numbers in the actual LI's (as, for example, a calculator) and not changing that innerHTML content (as I did in my example below). — Snowmonkey, Dec 18 '17 at 18:53

score 0 · Answer 3 · answered Dec 18 '17 at 18:51

I had followed up on that possible duplicate post mentioned in the comments before that comment was made, and the Array.indexOf trick seemed to be pretty useful for this. Here's a working example, or here's the fiddle.

function init() {
  var objList = document.querySelector("#id_ScrollToNav")
    objList.addEventListener('click', function(e) {
      var target = e.target.parentNode; // gets to the LI
      var parent = target.parentNode; // gets to the UL
      
      // what is the index of the UL in that LI?
      console.log(Array.prototype.indexOf.call(parent.children, target));
      e.stopPropagation();
    }, false);
  }

// Run it!
init();

#id_ScrollToNav ul {
  width: 450px;
  margin: auto;
}

#id_ScrollToNav li {
  float: left;
  cursor: pointer;
}

#id_ScrollToNav div {
  border: 1px solid #ccc;
  background-color: #999;
  width: 150px;
  height: 150px;
}

<header>
  <nav id="frameNavBox">
    Some Nav stuff
  </nav>
</header>
<main>
  <ul id="id_ScrollToNav">
    <li>
      <div>0<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
</div>
    </li>
    <li>
      <div>1<br>Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
    </li>
    <li>
      <div>2<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>3<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>4<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>5<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>6<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>7<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>8<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
  </ul>
</main>

Mouse Event log… is there a reference to the position an element has in relation to its parent?

3 Answers3