Edit Question - KnowledgeHub

Title Body

I currently have a page being dynamically created like below: <h2>a Heading</h2> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <h2>a Heading</h2> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> What I'm looking to do is to use jQuery to wrap the h2 and p tags till the next h2 tag: e.g.: <div class="headingName"> <h2>a Heading</h2> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> </div> <div class="headingName"> <h2>a Heading</h2> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> </div> So far I unsuccessfully managed this, but have gotten close using code from a user here (can't find the link to the original article): $('.report-content h2').each(function(){ var $set = $(); var nxt = this.nextSibling; while(nxt) { if(!$(nxt).is('.report-content h2')) { $set.push(nxt); nxt = nxt.nextSibling; } else break; } $set.wrapAll('<div class="content" />'); }); What I get is the div being wrapped around only the p tags but need to include the associated h2 tag, usually the one above the p tags.

Tags (comma-separated) Cancel