你如何获得更广泛的上下文 HTML，在 jQuery 或 Cheerio js 中包装给定的选择器代码？

Posted 2023-05-09

【中文标题】你如何获得更广泛的上下文 HTML，在 jQuery 或 Cheerio js 中包装给定的选择器代码？

【英文标题】：How do you get the wider context HTML that wraps a given selector code in jQuery or Cheerio js?

【发布时间】：2021-05-30 03:26:48

【问题描述】：

如果h1+ul>li>details>summary+p只有这样的结构，你如何获得整个html？即，如果它没有嵌套的 li、详细信息等，它将不会获取 ul 标记元素的 HTML。

h1+ul>li>details>summary+p

<div>
  <h1>T1</h1>
  <ul class="toggle">
    <li>
      <details>
        <summary><strong>Q1</strong></summary>
        <p>Answer1</p>
      </details>
    </li>
  </ul>
  <h1>T2</h1>
  <ul class="toggle">
    <li>
     <details>
       <summary>Q2</summary>
       <strong>Answer2</strong>
     </details>
    </li>
  </ul>
</div>

【问题讨论】：

我给你做了一个sn-p。请添加与您预期的选择器不对应但仍被选中的 HTML - 或者您是否希望 UL 中的整个内容具有特定样式？

听起来你需要一个组合的 .has jQuery 选择器

所以目前 CSS 在 p 上工作 - 如果它们符合您的选择器，您希望选择器选择 UL 及其后代？

@mplungjan 该问题已被编辑为包含我不想选择的第二个 UL 元素，因为它不遵循 ul>li>details>summary+p 模式。但在 jQuery 中，该模式仅将 HTML 返回到最后一个元素，即 p

@mplungjan 完全正确

【参考方案1】：

像这样？

const $collection = $("ul.toggle")
  .has("li>details>summary+p")
  .prev()
  .addBack()
  .addClass("red")
  
console.log($collection.text())  

.red  background-color:red 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>T1</h1>
  <ul class="toggle">
    <li>
      <details>
        <summary><strong>Q1</strong></summary>
        <p>Answer1</p>
      </details>
    </li>
  </ul>
  <h1>T2</h1>
  <ul class="toggle">
    <li>
     <details>
       <summary>Q2</summary>
       <strong>Answer2</strong>
     </details>
    </li>
  </ul>
</div>

【讨论】：

所以这行得通，但我意识到，我过于简化了我的例子。我已经编辑以包含我还想选择的 h1 标签。这又增加了一层难度。 $("h1 + ul.toggle").has("li>details>summary+p").addClass("red") 不会选择 h1，因为第一部分只返回 ul.toggle。我在想也许在第一个位完成后得到 ul 的前一个兄弟，但它看起来很hacky。

另外，我对添加类并不太在意，我想检索符合选择器模式的原始 HTML

我更新了脚本，因为我们可以一直链接