javascript - jQuery 如何用中断包装同级 Div

Question

给定以下 HTML:

<div class="ms-rteElement-accordion-headline">Headline</div>
<div class="ms-rteElement-accordion-content">Content</div>
<div class="ms-rteElement-accordion-headline">Headline</div>
<div class="ms-rteElement-accordion-content">Content</div>
<h1>Interruption</h1>
<div class="ms-rteElement-accordion-headline">Headline</div>
<div class="ms-rteElement-accordion-content">Content</div>

我需要的是:

<div class="wrapper">
  <div class="ms-rteElement-accordion-headline">Headline</div>
  <div class="ms-rteElement-accordion-content">Content</div>
  <div class="ms-rteElement-accordion-headline">Headline</div>
  <div class="ms-rteElement-accordion-content">Content</div>
</div>
<h1>Interruption</h1>
<div class="wrapper">
  <div class="ms-rteElement-accordion-headline">Headline</div>
  <div class="ms-rteElement-accordion-content">Content</div>
</div>

有没有使用 jQuery 的简单方法？我找到了 .wrapAll() 但这会给我:

<div class="wrapper">
  <div class="ms-rteElement-accordion-headline">Headline</div>
  <div class="ms-rteElement-accordion-content">Content</div>
  <div class="ms-rteElement-accordion-headline">Headline</div>
  <div class="ms-rteElement-accordion-content">Content</div>
  <div class="ms-rteElement-accordion-headline">Headline</div>
  <div class="ms-rteElement-accordion-content">Content</div>
</div>
<h1>Interruption</h1>

Answer 1

使用 .nextUntil 识别 h1 出现的位置并使用 .wrapAll .

$('div[class^="ms-rteElement"]').each(function(){
	$(this).wrapAll('<div class="wrapper"></div>').nextUntil('h1');
})

.wrapper{
  background:orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-rteElement-accordion-headline">Headline</div>
<div class="ms-rteElement-accordion-content">Content</div>
<div class="ms-rteElement-accordion-headline">Headline</div>
<div class="ms-rteElement-accordion-content">Content</div>
<h1>Interruption</h1>
<div class="ms-rteElement-accordion-headline">Headline</div>
<div class="ms-rteElement-accordion-content">Content</div>