I have a grid with an unknown number of rows and a variable number of columns. I set the number of columns by declaring a constant.* I detect a key combo to move focus from an element in the grid whose position is unknown; it could be any of the grid’s child elements (images in this case). The idea is to move focus to the image either directly above or below.
To do this, I need to get the nth
sibling element, either previous or next, from the focused element, where n is the number of columns.
I can’t use parentNode.querySelector(':nth-child[]')
since I don’t know the relationship of the focused element to the starting index (nth-child[0]
.
*Since this is a web component, the constant is set by declaring an attribute on the component.
Is there a JavaScript method to handle such cases?