Estoy trabajando en alguna funcionalidad en la que el usuario hace clic en un botón que muestra algunos "datos secundarios" debajo de un div principal. El marcado se parece a esto,

 <div class="row row-parent row-parent-index-1" style="top:20px">I am a parent (1)</div> <div class="row" data-top="40px">I am a child (1)</div> <div class="row" data-top="60px">I am a child (2)</div> <div class="row" data-top="80px">I am a child (3)</div> <div class="row row-parent row-parent-index-1" style="top:40px">I am a parent (2)</div> <div class="row" data-top="top:40px">I am a child (1/2)</div> <div class="row" data-top="top:60px">I am a child (2/2)</div> <div class="row" data-top="80px">I am a child (3/2)</div>

Actualmente lo tengo funcionando de modo que si un usuario hace clic en la fila .row-parent-index-1 , toma el atributo data-top de todos los elementos entre .row-parent-index-0 and .row-parent-index-1 and changes the top position to match that of the de datos` el problema. Necesito reflejar el cambio en todos los elementos; de lo contrario, obtendré elementos superpuestos, si hay alguna forma de reposicionar elementos absolutos en función de la posición de otros elementos.

es decir, si el elemento en el índice de 4 en el dom tiene la posición superior de 80, ¿necesitamos mover todos los elementos siguientes 80px hacia abajo también?

Aquí está mi intento,

 this.rowEl.addEventListener('click', (event) => { const target = event.currentTarget as HTMLElement; if(target.classList.contains("datagrid-parent-expanded")) { target.classList.remove('datagrid-parent-expanded'); } else { target.classList.add('datagrid-parent-expanded'); const indexOfCurrParent:any = parseInt(`${target?.dataset?.parentIndex}`); const targetClassList = target.classList.value; const siblings = helpers.nextUntil(document.querySelector(`.datagrid-main .datagrid-row-parent-index-${indexOfCurrParent}`), `.datagrid-main .datagrid-row-parent-index-${indexOfCurrParent+1}`); for (let rowIndex = 0; rowIndex < siblings.length; rowIndex++) { let currRow = siblings[rowIndex]; currRow.style.setProperty("top", `${currRow.dataset.top}`); currRow.classList.add('datagrid-parent-expanded'); } const nextSibling = siblings.pop().snextElementSibling as HTMLElement; const nextSiblingPosition = nextSibling.dataset.top!; nextSibling.style.top = parseInt(nextSiblingPosition, 10) + 20 + "px"; } });

Lo que estoy tratando de hacer aquí es obtener el último elemento de la función nextUntil y tomar su posición de hermanos y agregar la diferencia apropiada.