Geek Answers Handbook

Wrap custom content (H2, H3, P, etc.) In separate DIVs using jQuery

Looking at using jQuery to force the transfer of an arbitrary amount of user-provided content into three columns. The initial HTML would look like this:

<div#content> <h2>Page Title</h2> <p>Some arbitrary number of paragraphs followed by some arbitrary number of biographies, with an arbitrary number of paragraphs.</p> <p>Paragraph.</p> <h3>First Person</h3> <p>Paragraph.</p> <p>Paragraph.</p> <h3>Second Person</h3> <p>Paragraph.</p> <h3>Person Three</h3> <p>Paragraph.</p> <h3>Person Four</h3> <p>Paragraph.</p> <h3>Person Five</h3> <p>Paragraph.</p> </div>

The goal is to wrap the contents in three columns:

  • The first H2 and subsequent paragraphs will be in the first column.
  • The next two H3 and subsequent paragraphs will be in column 2.
  • The remaining H3 (in this case, three, it may be more) will be in column three.

So...

 <div#content> <div.col1> <h2>Page Title</h2> <p>Paragraph.</p> <p>Paragraph.</p> </div> <div.col2> <h3>First Person</h3> <p>Paragraph.</p> <p>Paragraph.</p> <h3>Second Person</h3> <p>Paragraph.</p> </div> <div.col3> <h3>Person Three</h3> <p>Paragraph.</p> <h3>Person Four</h3> <p>Paragraph.</p> <h3>Person Five</h3> <p>Paragraph.</p> <!-- etc. --> </div> </div>

I have CodePen installed here: http://codepen.io/ian-pvd/pen/GKryq

The following method is used:

 jQuery('h2').nextUntil('h3').andSelf().wrapAll('<div class="col1" />'); jQuery('h3:nth-of-type(1)').nextUntil('h3:nth-of-type(3)').andSelf().wrapAll('<div class="col2" />'); jQuery('h3:nth-of-type(3)').nextUntil('p:last-of-type').wrapAll('<div class="col3" />');

This works all the way to the third column, where I am having problems transferring the content that remains in the third column.

I checked these other questions that offered some help:

But solutions are more specific for transferring from H2 to H2, and not for switching between H2 and H3 tags or including two H3 tags in one set.

Trying to convince a user to enter content in different ways / separately is already out of the question for me.

Is there an easy way to do this?

Thank you for your help!

+4
source share
2 answers

The last h3:nth-of-type(3) selector h3:nth-of-type(3) not as expected because you are already completing the first and second h3; h3, which used to be third, is now the first of its kind.

Try wrapping the columns in reverse order instead:

 jQuery('#content>h3:nth-of-type(3)').nextUntil('div').andSelf().wrapAll('<div class="col3" />'); jQuery('#content>h3:nth-of-type(1)').nextUntil('div').andSelf().wrapAll('<div class="col2" />'); jQuery('#content>h2').nextUntil('div').andSelf().wrapAll('<div class="col1" />');
+2
source

I think I got the answer you were looking for, just changed the last selector:

 jQuery('h3:eq(2)').nextUntil('p:last').andSelf().wrapAll('<div class="col3" />');

see http://codepen.io/ian-pvd/pen/GKryq

+2
source

More articles:


All Articles