Hope you could help me solve this JS puzzle.
I need to run through the webpage, find divs with class “lstp-t” then hover over the container div.user-grid-card_avatar and press some more buttons which are loaded via AJAX.
Here’s the 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>
I went to read about querySelectorAll at MDN and several hours after I wrote this:
// 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
}
});
I would appreciate any ideas from you guys!