javascript - 如何根据其祖 parent 的子值从列表中选择一个元素

Question

1. 这是我试图选择的对象: $x('//div[contains(@class,"react-select__value-container")]')** 其中有 10 个 **
2. 这是祖 parent 对象: $x('//div[@class="chart-option"]/label[.="Layer"]/..') ** 只有其中之一 **
3. 父级是一个简单的//div[contains(@class, "react-select")]

所以代码如下所示:

<div class="chart-option">
   <label>Layer</label>
   <div class="react-select css-2b097c-container">
      <div class="react-select__value-container css-1hwfws3">

所以我需要祖 parent 有 child 的“值容器”/label[.="Layer"]

但我一生都无法获得正确的排序和相对语法来获得它。有这方面的好的教程吗？如有任何帮助，我们将不胜感激。

Answer 1

试试这个 xpath:

//div[@class="chart-option"][label="Layer"]/div[div[contains(@class,"react-select__value-container")]]

说明

//div[@class="chart-option"][label="Layer"]

查看文档中的任意位置，选择 div 标记，这样 (1) class 是 chart-option 并且 (2) 有名为 label 的子标签，其值为 Layer。

/div[div[contains(@class,"react-select__value-container")]]

查看上面结果集中的每个节点，选择所有子 div 标记，使得该子 div 标记本身具有 div 标签与您给出的类模式匹配。 (换句话说，根据孙子的 class 进行匹配，但最终选择子 div 标记。)

测试用例

这是我使用的更多测试用例。您可以使用在线xpath测试工具进行测试。

<div>
    <div class="chart-option">
        <label>nope</label>
        <div class="react-select css-WRONG-container">
            <div class="react-select__value-container css-WRONG">
            </div>
        </div>
    </div>
    <div class="chart-option">
        <label>Layer</label>
        <div class="react-select css-CORRECT-container">
            <div class="react-select__value-container css-CORRECT">
            </div>
        </div>
    </div>
    <div class="chart-option">
        <label>Not Layer</label>
        <div class="react-select css-WRONG-container">
            <div class="react-select__value-container css-WRONG">
            </div>
        </div>
    </div>
    <label>Layer</label>
    <div class="react-select css-WRONG-container">
        <div class="react-select__value-container css-WRONG">
        </div>
    </div>
    <div class="chart-option">
        <label>Layer</label>
        <div class="WRONG-AGAIN">
            <div class="WRONG-AGAIN">
            </div>
        </div>
    </div>
</div>