Puppeteer - 获取父元素 [英] Puppeteer - get parent element

问题描述

我正在尝试根据另一个元素的名称单击一个值(赔率)，但这两个值需要位于特定的父元素内，我可以通过其中的文本获取该值.

以下代码段可以在同一页面上多次使用相同的类别找到，因此不能选择按类别定位.

我首先需要获取一个带有文本第一个目标"的容器.然后我需要获取它的父元素，并且在父元素中，我需要获取第二个 div 元素(类 parent2).该元素包含其他元素.让我们想象一下我需要获取值为 200 的元素并点击它.

我尝试过使用 parentElement、parentNode，但在获取子元素的父元素时总是得到 'undefiend'，尽管成功检索了子元素.我只是无法从我可以沿着树向下到达所需元素并单击它的位置获取父级.

<div class="parent1"><span>第一个目标</span></div><div class="parent2"><div class="容器"><div"><div><span>马拉加</span><span class="odds">200</span></div><div><span>没有第一个目标</span><span class="odds">300</span></div><div><span>拉斯帕尔马斯</span><span class="gll-odds">400</span></div>

<div></div>

解决方案

XPath 表达式

如果您可以使用 XPath 表达式，您可以使用以下声明:

//div[contains(@class, "group") and contains(., "1st Goal")]/div[@class="parent2"]//span[@class="odds"]

此 XPath 表达式查询 div 元素，该元素具有 group 类并在某处包含文本 1st Goal.然后它将查询具有 parent2 类的子 div 并查询具有 odds 类的 span 元素.>

在 puppeteer 中的使用

要使用 puppeteer 获取元素，请使用 page.$x 函数.要单击元素，请使用 elementHandle.click.

综合起来，代码如下:

const [targetElement] = await page.$x('//div[contains(@class, "group") and contains(., "1st Goal")]/div[@class="parent2"]//span[@class="odds"]');等待 targetElement.click();

I'm trying to click on one value (odds) based on the name of the other element but those two need to be inside a specific parent element which I get by the text inside it.

The snippet below can be found multiple times on the same page with the same classes so targeting by class is not an option.

I first need to get a container with text "1st Goal. Then I need to get it's parent and in the parent, I need to get the second div element (class parent2). That element holds other elements. Let's imagine I need to get the element of value 200 and click on it.

I've tried using parentElement, parentNode but always get the 'undefiend' when getting a parent of the child element, although the child element is retrieved successfully. I just can't get the parent from where I could go down the tree to the desired element and click on it.

<div class="group ">
    <div class="parent1 "><span>1st Goal</span></div>
    <div class="parent2">
        <div class="container ">
            <div">
                <div><span>Malaga</span><span class="odds">200</span></div>
                <div><span>No 1st Goal</span><span class="odds">300</span></div>
                <div><span>Las Palmas</span><span class="gll-odds">400</span></div>
            </div>
        </div>
    </div>
    <div></div>
</div>

解决方案

XPath expressions

If you are okay with using XPath expression, you can use the following statement:

//div[contains(@class, "group") and contains(., "1st Goal")]/div[@class="parent2"]//span[@class="odds"]

This XPath expression queries for a div element having the class group and containing the text 1st Goal somewhere. Then it will query the children div with the class parent2 and query span elements with class odds inside.

Usage within puppeteer

To get the element with puppeteer, use the page.$x function. To click the element, use elementHandle.click.

Putting all together, the code looks like this:

const [targetElement] = await page.$x('//div[contains(@class, "group") and contains(., "1st Goal")]/div[@class="parent2"]//span[@class="odds"]');
await targetElement.click();

这篇关于Puppeteer - 获取父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！