循環遍歷兩個數組 - 檢查它們是否屬於一個 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>