Get the position of a li in a ul

Question

So i have this HTML

<ul>
  <li onclick="clicked(this.placeinul)"></li>
  <li onclick="clicked(this.placeinul)"></li>
  <li onclick="clicked(this.placeinul)"></li>
</ul>

And this javascript

function clicked(placeInUl) {
  console.log(placeInUl)
}

So when i for example would click on the first li it would print 1 or if i clicked on the last li it would print 3. How would i do that?

i have tried index and indexOf but i think i am doing it wrong — MariusE, Feb 25 '18 at 19:35

Celestine · Accepted Answer · 2018-02-25T19:54:30.370

1

EDIT: plain js version

function clicked(index) {
  alert(index+1);
}

li { cursor: pointer; }

<ul>
  <li onclick='clicked(Array.prototype.indexOf.call(this.parentElement.children, this));'>1</li>
  <li onclick='clicked(Array.prototype.indexOf.call(this.parentElement.children, this));'>2</li>
  <li onclick='clicked(Array.prototype.indexOf.call(this.parentElement.children, this));'>3</li>
</ul>

edited Feb 25 '18 at 19:54

answered Feb 25 '18 at 19:39

Celestine

448
7
18

1

There's no indication that OP intended to use jQuery. – jhpratt Feb 25 '18 at 19:40
i saw that when i search on google but i dont want to use jQuery if there is a way to do it in plain javascript – MariusE Feb 25 '18 at 19:42
@MariusE sorry, corrected – Celestine Feb 25 '18 at 19:54

Get the position of a li in a ul

1 Answers1