Get index of element as child relative to parent

Question

Let s say I have this markup    lt ul id  wizard  gt       lt li gt Step 1 lt  li gt       lt li gt Step 2 lt  li gt   lt  ul gt    And I have this jQuery       wizard li   click function             alert index of li relative to ul parent       How can I get the index of the child li relative to it s parent  when clicking that li   For example  when you click  Step 1   an alert with  0  should pop up

User · Answer

There s no need to require a big library like jQuery to accomplish this  if you don t want to  To achieve this with built-in DOM manipulation  get a collection of the li siblings in an array  and on click  check the indexOf the clicked element in that array    x000D   x000D  const lis       document querySelectorAll   wizard  gt  li     x000D  lis forEach  li    gt    x000D    li addEventListener  click        gt    x000D      const index   lis indexOf li   x000D      console log index   x000D        x000D      x000D   lt ul id  wizard  gt  x000D       lt li gt Step 1 lt  li gt  x000D       lt li gt Step 2 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Or  with event delegation    x000D   x000D  const lis       document querySelectorAll   wizard li     x000D  document querySelector   wizard   addEventListener  click      target      gt    x000D       Make sure the clicked element is a  lt li gt  which is a child of wizard  x000D    if   target matches   wizard  gt  li    return  x000D     x000D    const index   lis indexOf target   x000D    console log index   x000D      x000D   lt ul id  wizard  gt  x000D       lt li gt Step 1 lt  li gt  x000D       lt li gt Step 2 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Or  if the child elements may change dynamically  like with a todo list   then you ll have to construct the array of lis on every click  rather than beforehand    x000D   x000D  const wizard   document querySelector   wizard    x000D  wizard addEventListener  click      target      gt    x000D       Make sure the clicked element is a  lt li gt  x000D    if   target matches  li    return  x000D     x000D    const lis       wizard children   x000D    const index   lis indexOf target   x000D    console log index   x000D      x000D   lt ul id  wizard  gt  x000D       lt li gt Step 1 lt  li gt  x000D       lt li gt Step 2 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Delegate and Live are easy to use but if you won t have any more li s added dynamically you could use event delagation with normal bind click as well  There should be some performance gain using this method since the DOM won t have to be monitored for new matching elements  Haven t got any actual numbers but it makes sense         wizard   click function  e        var source     e target       if source is  li                alert index of li relative to ul parent         alert source index                 You could test it at jsFiddle  http   jsfiddle net jimmysv 4Sfdh 1

User · Answer

Take a look at this example        wizard li   click function          alert   this  index        alert index of li relative to ul parent

User · Answer

wizard li   click function          console log    this  index            However rather than attaching one click handler for each list item it is better  performance wise  to use delegate which would look like this       wizard   delegate  li    click   function          console log    this  index            In jQuery 1 7   you should use on  The below example binds the event to the  wizard element  working like a delegate event       wizard   on  click    li   function         console log    this  index

User · Answer

Yet another way      wizard li   click function               this    wizard    index          Demo https   jsfiddle net m9xge3f5

User · Answer

something like       ul wizard li   click function        var index      ul wizard li   index this     alert  index is      index

[javascript] Get index of element as child relative to parent

Examples related to javascript

Examples related to jquery