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

Question

如果 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>

Answer 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>

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

How do you get the wider context HTML that wraps a given selector code in jQuery or Cheerio js?

html

javascript

jquery

dom

cheerio