Say I have HTML that looks a bit like this
<div>
<p>Text 1</p>
<p class="foo">Text 2</p>
<p>Text 3</p>
<p>Text 4</p>
<p>Text 5</p>
<p>Text 6</p>
<p class="foo">Text 7</p>
<p class="foo">Text 8</p>
<p>Text 9</p>
<p class="foo">Text 10</p>
<p>Text 11</p>
<p class="foo">Text 12</p>
<p class="foo">Text 13</p>
<p class="foo">Text 14</p>
<p class="foo">Text 15</p>
<p>Text 16</p>
</div>
Any p element with the class "foo" gets wrapped in a div but any contiguous p elements with the class "foo" get wrapped into the same div as the first p (in the series). So the above HTML would end up looking like
<div>
<p>Text 1</p>
<div class="wrap">
<p class="foo">Text 2</p>
</div>
<p>Text 3</p>
<p>Text 4</p>
<p>Text 5</p>
<p>Text 6</p>
<div class="wrap">
<p class="foo">Text 7</p>
<p class="foo">Text 8</p>
</div>
<p>Text 9</p>
<div class="wrap">
<p class="foo">Text 10</p>
</div>
<p>Text 11</p>
<div class="wrap">
<p class="foo">Text 12</p>
<p class="foo">Text 13</p>
<p class="foo">Text 14</p>
<p class="foo">Text 15</p>
</div>
<p>Text 16</p>
</div>
I know how to get elements with the class "foo" but I’m lost trying to work out if there are contiguous p.foo elements that I need to wrap in the same div.
Should I just iterate through the nodes in the container div, append a wrapper div when I find a p.foo and just keep appending contiguous p.foo elements? I’ve had a few goes but it seems to fail for different ways I sort the original p elements.
2
Answers
Thanks for the answer. It lead me to do this:
For me, it's a bit simpler to read.
The provided code dynamically wraps consecutive paragraphs with the class foo inside separate
<div>
elements with the class wrap: