Ojalá me explique bien, aquí va...
Entonces, el siguiente HTML muestra una versión básica de mi HTML; esencialmente, necesito agregar el H4 dentro del contenido del cliente al elemento flotante cuando se pasa el mouse sobre él (el elemento flotante actualmente se muestra pero está en blanco sin texto adentro).
Así que uso document.QuerySelectorAll para generar una lista de nodos y luego convertirla en una matriz, recorrer la matriz del cliente.
En el interior, uso dos bucles for para recorrer la matriz de contenido del cliente y pasar la matriz de elementos y verificar si están contenidos dentro de la división del cliente ...
Si lo son, entonces quiero agregar el h4 al elemento flotante. Cada h4 será único, ya que serán nombres de personas, por lo que debe agregar el correcto.
Aquí está el código de ejemplo y la imagen del resultado en el proyecto en sí: imagen de resultados
const hoverItem = document.querySelectorAll(".hover-item") const hoverItemArray = Array.from(hoverItem); const clients = document.querySelectorAll(".client"); const clientsArray = Array.from(clients); const clientContent = document.querySelectorAll(".client-content"); const clientContentArray = Array.from(clientContent); clientsArray.forEach(item => { for (i = 0; i <= clientContentArray.length; i++) { for (e = 0; e <= hoverItemArray.length; e++) { if (item.contains(clientContentArray[i] && hoverItemArray[e])) { hoverItem[e].append(clientContentArray[i].innerHTML); } } } }) <div class="results"> <div class="client"> <img class="client-image"> <div class="client-content"> <h4>Client Name</h4> </div> <div class="hover-item"></div> </div> <div class="results"> <div class="client"> <img class="client-image"> </div> <div class="client-content"> <h4>Client Name</h4> </div> <div class="hover-item"></div> </div> <div class="results"> <div class="client"> <img class="client-image"> </div> <div class="client-content"> <h4>Client Name</h4> </div> <div class="hover-item"></div> </div>Si lo entiendo correctamente, básicamente desea mover el elemento h4 de .client-content a .hover-item cuando ambos elementos están dentro de un elemento .client . Entonces, en su ejemplo html, sería solo para el primer elemento .client .
Puedes hacerlo con el siguiente código. Agregué algunos comentarios al código para explicar y agregué algunos css con colores para visualizar lo que está sucediendo.
//Loop over all client divs. document.querySelectorAll('.client').forEach((clientDiv) => { //Check if the div contains both .client-content and .hover-item elements. if(clientDiv.querySelector('.client-content') && clientDiv.querySelector('.hover-item')) { //Append the h4 to to hover item. clientDiv.querySelector('.hover-item').append(clientDiv.querySelector('.client-content h4')); } }); div { display: inline-block; } .hover-item { background-color: blue; } .client-content { background-color: red; } h4 { margin: 10px; background-color: yellow; } <div class="results"> <div class="client"> <img class="client-image"> <div class="client-content"> <h4>Client Name</h4> </div> <div class="hover-item"></div> </div> <div class="results"> <div class="client"> <img class="client-image"> </div> <div class="client-content"> <h4>Client Name</h4> </div> <div class="hover-item"></div> </div> <div class="results"> <div class="client"> <img class="client-image"> </div> <div class="client-content"> <h4>Client Name</h4> </div> <div class="hover-item"></div> </div>Primero: no está escuchando el evento "hover" (en JS mouseover ) y necesita eventlisteners para eso.
Si desea agregar el encabezado del mismo div como .hover-item , no necesita matrices. Solo necesita seleccionar el elemento anterior y su h4 , luego eliminarlo y agregarlo al encabezado. Además, puede recorrer la colección hoverItem directamente sin convertirlo en una matriz.
const hoverItem = document.querySelectorAll(".hover-item"); for (i = 0; i < hoverItem.length; i++) { hoverItem[i].addEventListener('mouseover', function() { const client_name = this.previousElementSibling.querySelector('h4'); if (client_name) { client_name.remove(); this.append(client_name); } }); } <div class="results"> <div class="client"> <img class="client-image"> <div class="client-content"> <h4>Client Name 1</h4> </div> <div class="hover-item">Hover me!</div> </div> <div class="results"> <div class="client"> <img class="client-image"> </div> <div class="client-content"> <h4>Client Name 2</h4> </div> <div class="hover-item">Hover me!</div> </div> <div class="results"> <div class="client"> <img class="client-image"> </div> <div class="client-content"> <h4>Client Name 3</h4> </div> <div class="hover-item">Hover me!</div> </div>