All geek questions in one place

How can I wrap each element and all its brothers and sisters before the next occurrence of the same element?

I have a markup similar to the following:

<h3>A Heading</h3> <p>Here is a paragraph.</p> <ul> <li>First</li> <li>Second</li> </ul> <blockquote>Here some other block-level element</blockquote> <h3>The Wrapping Should Stop Before This Heading, but a Second One Should Begin</h3> <ol> <li>First</li> <li>Second</li> </ol> <p>Notice the varying block-level elements? It probably doesn't make any difference.</p>

I want to wrap every h3 and everything except the next h3 in one div .

The result should be:

 <div> <h3>A Heading</h3> <p>Here is a paragraph.</p> <ul> <li>First</li> <li>Second</li> </ul> <blockquote>Here some other block-level element</blockquote> </div> <div> <h3>The Wrapping Should Stop Before This Heading, but a Second One Should Begin</h3> <ol> <li>First</li> <li>Second</li> </ol> <p>Notice the varying block-level elements? It probably doesn't make any difference.</p> </div>

I found similar questions, like this one . It uses a combination of .nextUntil() and .andSelf() (or .addBack() after my editing has been approved), but this will wrap h3 and content between separate div .

+4
source share
2 answers

.wrapAll() seems to be the missing link.

 $('h3').nextUntil('h3').addBack().wrapAll('<div>');
+4
source

You need a selector :first , otherwise you will wrap all the contents not only with the first h3 or the second h3

$('h3:first').nextUntil('h3').addBack().wrapAll('<div>');

Fiddle

+3
source

Source: https://habr.com/ru/post/1501132/

More articles:


All Articles