3

Edit: The suggestion points to a jquery answer, which I would prefer not to use. I may have done a bad job explaining this. When you click on a class, I want to know which one it is of all the classes sharing that same name. For instance, if there are 8 buttons on the page with a classname of 'mybutton', when I click on one, I want to know which index it was ex: mybutton[3].

Original Post: Is there a simple way to get the index of the class you clicked? I can't seem to find anything in the MouseEvent obj. I have searched stackoverflow/internet but what I can find seems to be over complicated,unanswered, or using jQuery. Example:

document.body.addEventListener('click',function(event){
        console.log(event.target.className);
        console.log(event.target.className.index??)`
    });

I feel like it should be simple, no?

user3612986
  • 315
  • 2
  • 7
  • 18
  • 2
    What do you mean by the "index of the class?" – Matt Ball Oct 30 '15 at 20:33
  • Did you mean ***Index of element with some specific class-name?*** – divy3993 Oct 30 '15 at 20:34
  • If the linked question isn't really what you were asking, please clarify what you mean by "the index of the class". – Pointy Oct 30 '15 at 20:41
  • @divy3993 Yes I am looking to know the index of the element. – user3612986 Oct 30 '15 at 20:48
  • @Pointy Yes the answer is not really what I was asking for. I revised the question to try and better explain my desired result. – user3612986 Oct 30 '15 at 20:50
  • This wasn't answered correctly. How do I reopen this Alexander? The answer/duplicate pointed to a jquery solution which I asked not to use in the title and description. – user3612986 Oct 30 '15 at 20:59
  • Well that linked question is exactly what you're looking for. It's **not** a jQuery solution. – Pointy Oct 30 '15 at 21:01
  • @Pointy thanks for the response pointy. But unless I'm mistaken it doesn't. The solution points to the child nodes of the element. What I want to know is if you if there are 8 buttons on the page with a class name of 'mybutton', how can i return which of those buttons I clicked? Again, sorry if I am doing a poor job explaining it am may be mixing up the nomenclature. – user3612986 Oct 30 '15 at 21:05
  • OK, the confusion is probably that "index" means something specific in jQuery. Your question however is still not completely clear; elements can have more than one class, so which one is it that you care about? Or do you care about all of them? – Pointy Oct 30 '15 at 21:07
  • @Pointy thanks Pointy. If there are more than one class on that particular div/tag I would like to know that index as well. so:
    could return red[2] and blue[5] if clicked.     – user3612986 Oct 30 '15 at 21:13

1 Answers1

4

There's no "easy" way to do it; that is, the DOM API doesn't directly answer that sort of question. You can however simply search through the list of elements that match any characteristic you want and see which one your element matches:

function indexIn(selector, element) {
  var list = document.querySelectorAll(selector);
  for (var i = 0; i < selector.length; ++i)
    if (list[i] === element) return i;
  return -1;
}

Then your handler can look through the .classList on the clicked element:

document.body.addEventListener('click',function(event){
  for (var i = 0; i < this.classList; ++i)
    console.log("index for class " + this.classList[i] + ": " +
      indexIn("." + this.classList[i], this));
});
Pointy
  • 405,095
  • 59
  • 585
  • 614