I recently had a case where I had markup like this:
I wanted to get the
.section-header and the related
.section-item into a container. This output was provided my some already-existing, kind-of-complex functionality so I didn’t want to bother changing it on the back-end. Also, this container functionality related to front-end only functionality, so it wasn’t too much of a stretch there. So I thought this was going to be a case of looping through these elements and somehow creating a wrapper for them, which wasn’t going to make things very easy.
Luckily, jQuery comes with a
.nextUntil() function. So with a single bit of JS, I can wrap these sections like this: