迭代 document.querySelectorAl 上升元素

问题描述 投票:0回答:0

希望你能帮我解决这个 JS 难题。

我需要浏览网页,找到类为“lstp-t”的 div,然后将鼠标悬停在容器 div.user-grid-card_avatar 上,然后按更多通过 AJAX 加载的按钮。

这是 HTML:

<div class="ugrid_i">
  <div class="user-grid-card __xs">
    <div class="user-grid-card_avatar"></div>
   <divclass="user-grid-card_cnt">
      <div class="ellip"></div>
      <div></div>
    </div>
  </div>

<div class="ugrid_i">
  <div class="user-grid-card __xs">
    <div class="user-grid-card_avatar"><!-- this I want to hover over --></div>
   <div class="user-grid-card_cnt">
      <div class="lstp-t"></div>
      <div></div>
    </div>
  </div>

</div>

我在 MDN 上阅读了有关 querySelectorAll 的内容,并在写完这篇文章几个小时后:

// Find all elements containing the specified text
const elementsWithText = document.querySelectorAll("div.lstp-t");

console.log(elementsWithText);
// outputs [NodeList(65) [div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t]

// Define the class name of the parent container
const parentContainerClass = ".user-grid-card_avatar";

    // Iterate through the elements containing the text
    elementsWithText.forEach(element => {
        // Find the parent container with the specified class
        let parentContainer = element.closest('parentContainerClass');

        console.log(parentContainer); // outputs 65 null and the rest doesn't work of course

        
        let event = new Event('mouseenter', {
        'view': window,
        'bubbles': true,
        'cancelable': true
        });
        
        
        // If a parent container with the specified class is found, trigger a click event on it
        if (parentContainer) {
            parentContainer.dispatchEvent(event); // Trigger click event
        }
    });

我将不胜感激你们的任何想法!

javascript nodelist
© www.soinside.com 2019 - 2024. All rights reserved.