循环遍历两个数组 - 检查它们是否属于一个 div - 将 html 附加到 div

Question

希望我能很好地解释这一点，这里是...

所以下面的 HTML 显示了我的 HTML 的基本版本 - 基本上我需要在悬停时将 H4 内部客户端内容附加到悬停项目（悬停项目当前显示但里面没有文本是空白的）。

所以我使用 document.QuerySelectorAll 生成一个 Node 列表，然后转换为一个数组，循环遍历客户端数组。

在里面，我使用两个 for 循环来遍历客户端内容数组和悬停项目数组，并检查它们是否包含在客户端 div 中...

如果是，那么我想将 h4 附加到悬停项。 每个 h4 都是唯一的，因为它们是人名，因此需要附加正确的名称。

这是项目本身结果的示例代码和图像：结果图像

 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

第一：您不是在监听“悬停”事件（在 JS mouseover ），因此需要事件侦听器。

---

如果你想从同一个div附加标题，就像.hover-item你不需要数组。 您只需要选择前一个元素及其h4然后将其删除并将其附加到标题。 此外，您可以直接循环遍历集合hoverItem而无需将其转换为数组。

 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

如果我理解正确，当两个元素都在.client元素中时，您基本上希望将h4元素从.client-content到.hover-item 。 因此，在您的示例 html 中，它仅适用于第一个.client元素。

你可以用下面的代码做到这一点。 我在代码中添加了一些注释来解释并添加了一些带有颜色的 css 来可视化正在发生的事情。

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