Select 并用兄弟姐妹包装特定的 parent 元素，直到下一个特定的 parent 元素

Question

我希望使用 jQuery 到 select p 标签，这些标签是具有特定 class [的跨度的主要 parent 元素 hdr，然后我想包装那个 p 标签及其所有兄弟姐妹，直到下一个 p 标签，它是 hdr class 的 parent，依此类推.

我遇到的问题是，第二个和第三个包装器及其包含的内容最终嵌套在它们之前的一组包装器中，而不是一个接一个地打印每个包装器。

我的初始标记：

$('.main .hdr').parents('p').each(function() {
  $(this).nextUntil($(this)).addBack().wrapAll('<div class="wrapper" />');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">

  <p><strong><span class="hdr">Heading #1</span></strong></p>
  <p>Some paragraph text</p>
  <p>Some paragraph text</p>
  <p>Some paragraph text</p>
  <p>Some paragraph text</p>

  <p><strong><span class="hdr">Heading #2</span></strong></p>
  <p>Some paragraph text</p>
  <p>Some paragraph text</p>

  <p><strong><span class="hdr">Heading #3</span></strong></p>
  <p>Some paragraph text</p>
  <p>Some paragraph text</p>
  <p>Some paragraph text</p>
  <p>Some paragraph text</p>
  <p>Some paragraph text</p>

</div>

当前输出：

<div class="main">

  <div class="wrapper">
    <p><strong><span class="hdr">Heading #1</span></strong></p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <div class="wrapper">
      <p><strong><span class="hdr">Heading #2</span></strong></p>
      <p>Some paragraph text</p>
      <p>Some paragraph text</p>
      <div class="wrapper">
        <p><strong><span class="hdr">Heading #3</span></strong></p>
        <p>Some paragraph text</p>
        <p>Some paragraph text</p>
        <p>Some paragraph text</p>
        <p>Some paragraph text</p>
        <p>Some paragraph text</p>
      </div>
    </div>
  </div>

</div>

期望的输出：

<div class="main">

  <div class="wrapper">
    <p><strong><span class="hdr">Heading #1</span></strong></p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
  </div>

  <div class="wrapper">
    <p><strong><span class="hdr">Heading #2</span></strong></p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
  </div>

  <div class="wrapper">
    <p><strong><span class="hdr">Heading #3</span></strong></p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
  </div>

</div>

JSFiddle

Answer 1

像这样，将选择传递给 nextUntil，甚至只是 p:has(.hdr) 都可以，而不是 $(this)

var elems = $('.main p:has(.hdr)');

elems.each(function() {
    $(this).nextUntil(elems).addBack().wrapAll('<div class="wrapper" />');
});

FIDDLE

Select 并用兄弟姐妹包装特定的 parent 元素，直到下一个特定的 parent 元素

Select and wrap specific parent elements with siblings until next specific parent element

html

javascript

string

jquery

parent