JavaScript find index of div

Question

That's my first question here so please don't hate me :) Tried to look for it but I wasn't able to find what I need. How can I print index of div with class .circle that has been clicked? Here's my code

var circle = document.querySelectorAll(".circle");

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

 circle[i].addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(circle.indexOf(this));
 })
}

Thanks!

@KobyDouek: In the above, that would always log `circle.length`. (But it's fixable.) — T.J. Crowder, Aug 21 '17 at 17:07
@MatthewCiaramitaro: I know. See: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — T.J. Crowder, Aug 21 '17 at 17:07

score 2 · Accepted Answer · answered Aug 21 '17 at 17:09

Make sure you use let in your for loop and just console.log(i)

var circle = document.querySelectorAll(".circle");

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

 circle[i].addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(i);
 })
}

Jonas Wilms · Answer 2 · 2017-08-21T17:15:52.393

Just a small change: Simply convert the NodeList into an Array ( Arrays have an indexOf function):

 var circle = Array.from(document.querySelectorAll(".circle"));

Try it

Alternatively, you could simply take the index of the iteration:

 var circle = document.querySelectorAll(".circle");

for(let i=0; i<circle.length; i++){
 circle[i].addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(i);
  })
}

score 0 · Answer 3 · answered Aug 21 '17 at 17:09

If by "index" you mean its index in the collection returned by that querySelectorAll call, you can use querySelectorAll's forEach (which is relatively new, but polyfillable):

var circle = document.querySelectorAll(".circle");
circle.forEach(function(circle, index) {
 circle.addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(index);
});

score 0 · Answer 4 · answered Aug 21 '17 at 17:10

0

Since you loop through your elements with the i as an iterator, just declare i as a different variable by using let in you for loop and then you can just use console.log(i) to show each circle's index:

var circle = document.querySelectorAll(".circle");

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

    circle[i].addEventListener("click", function(){
        this.classList.toggle("hide");
        console.log(i);
    })
}

answered Aug 21 '17 at 17:10

Koby Douek

16,156
19
74
103

And is there a method to change the class of every other elements (opposite to this)? – Jakub Matwiejew Aug 21 '17 at 17:42
@JakubMatwiejew ALL elements? or all elements under another element? – Koby Douek Aug 21 '17 at 17:44
all circles without the one that was clicked – Jakub Matwiejew Aug 21 '17 at 17:49

score 0 · Answer 5 · answered Aug 21 '17 at 17:22

May be useful for someone, the same solution in ES5, using closures:

var circle = document.querySelectorAll(".circle");

for(var i=0; i<circle.length; i++){
    (function(i) {
        circle[i].addEventListener("click", function(){
            this.classList.toggle("hide");
            console.log(i);
        });
    })(i);
}

JavaScript find index of div

5 Answers5