Estoy tratando de hacer clic en el índice 0 de la lista de nodos y mover ese elemento hacia abajo después de su próximo hermano. O el segundo índice y muévalo por encima de su hermano anterior en el que he trabajado para el primer intento:
https://i.gyazo.com/8918c506d526a8dd2f77602c65d68c2a.mp4
Sin embargo, una vez que hice clic en estos dos elementos, creo que sus posiciones en lo que respecta a mi JavaScript siguen siendo las mismas. Así que termino recibiendo un error de consola:
Uncaught TypeError: Cannot read properties of null (reading 'after')
Este es mi JS actualmente. Como puede ver, muevo los elementos hacia arriba y hacia abajo según el índice:
export const reviewsUtil = () => { const allReviewCards = document.querySelectorAll('.reviews__cardInner'); const allDescriptions = document.querySelectorAll('.reviews__descWrapper'); allReviewCards.forEach((e, index) => { e.addEventListener('click', (review) => { if (review.target.classList.contains('inactive')) { //Get's all reviews that aren't the clicked and hides them allDescriptions.forEach(desc => { desc.classList.add('reviews__infoInactive'); desc.style.removeProperty('display'); }); //Loops through all instances and removes the active class allReviewCards.forEach(e => { e.classList.remove('active'); e.classList.add('inactive'); e.nextElementSibling.classList.remove('reviews__infoActive'); }) //Set's clicked as active review.target.style.removeProperty('display'); review.target.classList.remove('inactive'); review.target.classList.add('active'); //Set's clicked review text as active e.nextElementSibling.classList.add('reviews__infoActive'); e.nextElementSibling.style.removeProperty('display'); if (index === 0) { e.parentElement.nextElementSibling.after(review.target.parentElement); } else if (index === 2) { index = 1; e.parentElement.previousElementSibling.before(review.target.parentElement); } } }) }) } export default reviewsUtil;Lo que me gustaría intentar y lograr es que me devuelvan una lista actualizada una vez que se haya manipulado el DOM. ¿Hay alguna manera de que pueda monitorear esto o mi enfoque está un poco fuera de lugar?
Cualquier ayuda muy apreciada.