我怎样才能访问任何 <ul>，然后访问其使用的 puppeteer 的任何 <li> 项目？

Question

例如：给定一个页面中的设施部分，它包含以列方式在不同 ul 中可用的不同设施。（所以像第 1 列的 ul 包含列表项（li）形式的各种设施）。所以我只想访问第二个 ul（想象 table 的第二列）及其第 4 和第 5 个列表项（li）。

如果我这样做，document.querySelector(".text-body li") 那么我将只从第一个 ul 获取数据，但我想从第二个 ul 获取数据。

这里的 .text-body 是 class 并且每个列表都相同。

<div class="text-block hospital-facility" id="section-facilities">
<h2 class="text-block-title"></h2>
<div class="facility-list"› 
<h4 class="text-block-list-title">Comfort During Stay</h4>
<div class="text-body add-view-more" data-visible-item="6" data- 
showmore-text="More Details"> 
<ul>...</ul>
<p class="text-right vm-wrp"></p> </div> </div>
<div class="facility-list> 
<h4 class="text-block-list-title">Money Matters</h4> 
  <div class="text-body">
<u1> 
<li>Health insurance coordination</li> 
<li>Medical travel insurance</li>
<li>Foreign currency exchange</li> 
<li>ATM</li> <li>Credit Card< li> 
 </ul>

上面代码中，第二个ul包含各种支付方式，我都需要。我们可以做 ul:last-child 但是大约有 6-7 个 ul 标签所以我们需要一些东西 select 只有第二个 ul

Answer 1

所以我想你的 html 看起来像这样：

<div id="ulParent">
    <ul>
        <li>li11</li>
        <li>li12</li>
    </ul>
    <ul>
        <li>li21</li>
        <li>li22</li>
    </ul>
</div>

那么你可以这样做：

var secondUl = document.querySelector("#ulParent ul:nth-child(2)");
var fourthLi = secondUl.querySelector("li:nth-child(4)");
var fifthLi = secondUl.querySelector("li:nth-child(5)");

OP添加后更新HTML示例：

因此 HTML:

<div class="text-block hospital-facility" id="section-facilities">
    <h2 class="text-block-title"></h2>
    <div class="facility-list">
        <h4 class="text-block-list-title">Comfort During Stay</h4>
        <div class="text-body add-view-more" data-visible-item="6" data-showmore-text="More Details"> 
            <ul><li>...</li></ul>
            <p class="text-right vm-wrp"></p>
        </div>
    </div>
    <div class="facility-list">
        <h4 class="text-block-list-title">Money Matters</h4> 
        <div class="text-body">
            <ul> 
                <li>Health insurance coordination</li> 
                <li>Medical travel insurance</li>
                <li>Foreign currency exchange</li> 
                <li>ATM</li>
                <li>Credit Card</li> 
            </ul>
        </div>
    </div>
</div>

ul 不是其父项的第二个子项，因此您不能使用 :nth-child(2)。

相反，您需要第一个 ul 第二个 .facility-list:

var targetUl = document.querySelector("#section-facilities .facility-list:nth-of-type(2) ul");
// then retrieve the `li`s as the previous example shows:
var fourthLi = targetUl.querySelector("li:nth-child(4)");
var fifthLi = targetUl.querySelector("li:nth-child(5)");

请注意，您还可以使用 xpath 获取 targetUl：

var targetUl = $x("//h4[contains(text(), 'Money Matters')]//following-sibling::div//ul");

我怎样才能访问任何 <ul>，然后访问其使用的 puppeteer 的任何 <li> 项目？

how can I access any <ul> and then any <li> item of its using puppeteer?

javascript

puppeteer