使用 Xpath 如何选择具有特定 innerText 的元素的多个父类？答案

【问题标题】：Using Xpath how to select multiple parent classes of an element that has a specific innerText?使用 Xpath 如何选择具有特定 innerText 的元素的多个父类？
【发布时间】：2021-05-03 20:11:04
【问题描述】：

使用 Puppeteer，我需要选择小时和分钟以从小部件中安排帖子小部件的 HTML 代码是这样的：

 <div class="vdatetime-time-picker">
    <div class="vdatetime-time-picker__list vdatetime-time-picker__list--hours">
      <div class="vdatetime-time-picker__item vdatetime-time-picker__item--selected">00</div>
      <div class="vdatetime-time-picker__item">01</div>
      <div class="vdatetime-time-picker__item">02</div>
      <div class="vdatetime-time-picker__item">03</div>
      <div class="vdatetime-time-picker__item">04</div>
      <div class="vdatetime-time-picker__item">05</div>
      <div class="vdatetime-time-picker__item">06</div>
      <div class="vdatetime-time-picker__item">07</div>
      <div class="vdatetime-time-picker__item">08</div>
      <div class="vdatetime-time-picker__item">09</div>
      <div class="vdatetime-time-picker__item">10</div>
      <div class="vdatetime-time-picker__item">11</div>
      <div class="vdatetime-time-picker__item">12</div>
      <div class="vdatetime-time-picker__item">13</div>
      <div class="vdatetime-time-picker__item">14</div>
      <div class="vdatetime-time-picker__item">15</div>
      <div class="vdatetime-time-picker__item">16</div>
      <div class="vdatetime-time-picker__item">17</div>
      <div class="vdatetime-time-picker__item">18</div>
      <div class="vdatetime-time-picker__item">19</div>
      <div class="vdatetime-time-picker__item">20</div>
      <div class="vdatetime-time-picker__item">21</div>
      <div class="vdatetime-time-picker__item">22</div>
      <div class="vdatetime-time-picker__item">23</div>
    </div>
    <div class="vdatetime-time-picker__list vdatetime-time-picker__list--minutes">
      <div class="vdatetime-time-picker__item">00</div>
      <div class="vdatetime-time-picker__item">05</div>
      <div class="vdatetime-time-picker__item">10</div>
      <div class="vdatetime-time-picker__item">15</div>
      <div class="vdatetime-time-picker__item">20</div>
      <div class="vdatetime-time-picker__item">25</div>
      <div class="vdatetime-time-picker__item">30</div>
      <div class="vdatetime-time-picker__item">35</div>
      <div class="vdatetime-time-picker__item vdatetime-time-picker__item--selected">40</div>
      <div class="vdatetime-time-picker__item">45</div>
      <div class="vdatetime-time-picker__item">50</div>
      <div class="vdatetime-time-picker__item">55</div>
    </div>
  </div>

假设我需要选择 15:15。我知道使用 Xpath 我可以选择内部文本

const xpathHour = "//div[text()='15']";

the problem is that when selecting the minutes, being a multiple of 5, it would select the hour (again) because is the first element Puppeteer would find with the text of 15. 它们的父元素不同，那么我怎样才能在 Xpath 中获得与这个相同的结果？

document.querySelector('.vdatetime-time-picker__list--hours .vdatetime-time-picker__item').innerText === "15"

【问题讨论】：

标签： javascript node.js xpath puppeteer

【解决方案1】：

您可能正在寻找：

const xpathMinute = "(//div[text()='15'])[2]";

这是第二个带有“15”文本的div。

() 很重要，因为[] 运算符具有更高的优先级。

【讨论】：

知道了，这行得通。我还找到了一个 xpath 备忘单并附带了这个也可以使用 let xpath = '//div[@class="vdatetime-time-picker__list vdatetime-time-picker__list--hours"]//div[text()="12 "]'