DEV Community

Cassidy Williams
Cassidy Williams

Posted on • Originally published at blog.cassidoo.co

3

HTML "self-awareness" with sibling indexing in JavaScript

This is a super specific use case, but if you have an HTML element and you want it to be more "self-aware", you can do:

let element = document.getElementById('whatever');

// To get an array of siblings
[...element.parentElement.children]

// To get current index of self
[...element.parentElement.children].indexOf(element)
Enter fullscreen mode Exit fullscreen mode

What we're doing here is:

  • Getting our HTML element
  • Getting the parent of our HTML element
  • Getting the children of the parent
  • Spreading it into an array (because it's an HTMLCollection otherwise, you can also use Array.from)
  • Getting the index of our element amongst all of its siblings

I figured this out after working on a framework-less project, where I wanted an HTML <button> to be able to tell the function it called its own index.

Example HTML:

<div>
    <button onclick="whoami(event)">Some button</button>
    <button onclick="whoami(event)">Some other button</button>
    <button onclick="whoami(event)">And other button</button>
</div>
Enter fullscreen mode Exit fullscreen mode

And the corresponding example JavaScript:

function whoami(event) {
    let element = event.currentTarget;
    let currentButtonIndex = [...element.parentElement.children].indexOf(element);
    // ...and so on
}
Enter fullscreen mode Exit fullscreen mode

Anyway, I thought this was cool, hope it's useful for you!

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more