Loop through two arrays - check if they belong to a div - append html to div

Question

Hopefully I explain this well, here goes...

So the below HTML displays a basic version of my HTML - essentially I need to append the H4 inside client content to the hover-item when hovered over (The hover item currently displays but is blank with no text inside).

So I use document.QuerySelectorAll to generate a Node list and then convert to an Array, loop over the client array.

Inside I use two for loops to loop over the client content array and hover item array and check if they are contained within the client div...

If they are, I then want to append the h4 to the hover item. Each h4 will be unique as they will be people's names so it needs to append the correct one.

Here's the example code & image of the result on the project itself: results image

 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>

Answer 1

First: You aren't listening for the "hover"-event (in JS mouseover ) and need eventlisteners for that.

---

If you want to append the heading from the same div like the .hover-item you don't need arrays. You just need to select the previous element and its h4 then remove it and append it to the heading. Furthermore you can loop over the collection hoverItem directly without converting it to an array.

 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>

Answer 2

If I understand you correctly you basically want to move the h4 element from the .client-content to .hover-item when both elements are within a .client element. So in you example html it would be only for the first .client element.

You can do that with the code below. I added some commentary to the code to explain and added some css with colors to visualize what is happening.

 //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 div 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>