Cassidy Williams

Software Engineer in Chicago

Cassidy's face

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)

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>

And the corresponding example JavaScript:

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

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

View posts by tag

#advice #events #technical #learning #musings #meta #personal #work