Javascript get index value using this variable

Question

When I click li links, I would like to get index value using this variable. How I can achieve it?

let liList = document.getElementsByTagName("li");
for (let i = 0; i < liList.length; i++) {
    liList[i].onclick = function () {
       alert(liList.indexOf.call(this));        //I want to use this to get i value
    };
 }

<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>

liList.indexOf(this) ? Though the i is let scoped, so not sure why you couldn't just use it. Or use a forEach with a closure to get the index and not need this logic. — Taplar
– Taplar, Commented May 6, 2020 at 13:47
liList.indexOf(this) , this is only example I actually cannot find any method to get it. I know alert(i) I can get index (e.g. I click 11, it return 0). Since I learn to simulate jquery index() method, I want to use this to get index — Chun Wai
– Chun Wai, Commented May 6, 2020 at 14:13
Yes. I try. But I want not to use i variable, is it possible use "this" to get i value — Chun Wai
– Chun Wai, Commented May 6, 2020 at 14:22

jeprubio · Accepted Answer · 2020-05-06 14:33:27Z

2

If you want to get the index of the clicked value there is no need to do the indexOf, you have the index in your loops i var:

let liList = document.getElementsByTagName("li");
for (let i = 0; i < liList.length; i++) {
    liList[i].onclick = function () {
       console.log(i);
    };
 }

<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>

And if you really want to do indexOf() you should transform that HTMLCollection returned from getElementsByTagName() to an array first:

let liList = document.getElementsByTagName("li");
for (let i = 0; i < liList.length; i++) {
    liList[i].onclick = function () {
        let arr = Array.prototype.slice.call( liList, 0 ); // transform in array
        console.log(arr.indexOf(this));
    };
 }

<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>

edited May 6, 2020 at 14:33

answered May 6, 2020 at 14:16

jeprubio

18.1k5 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chun Wai Over a year ago

yes, this is really I want, but i also thank all quick reply and help

jeprubio Over a year ago

I'm glad I could help.

Jesper Martinez · Accepted Answer · 2020-05-06 14:22:56Z

0

This will fix your problem. Thanks

    let liList = document.getElementsByTagName("li");
    for (let i = 0; i < liList.length; i++) {
        liList[i].onclick = function () {
           console.log(liList[i].innerHTML);  /* li value that you want to get or */  
           console.log(i); /* Index value that you want to get */
        };
    }

<ul>
  <li>11</li>
  <li>22</li>
  <li>33</li>
</ul>

edited May 6, 2020 at 14:22

answered May 6, 2020 at 13:51

Jesper Martinez

6415 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript get index value using this variable

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related