Jump to content
JamieY

Help with Jquery code to wrap elements

Recommended Posts

Hello. I need some help with jquery. I have gotten very very close but can not for the life of me figure this out. I saw this code somewhere and thought it would work for me. It almost does but not completely. Here is my issue.

I am building a WordPress website using a page builder. The page builder does not have the ability to make 100% rows. Therefore, all the content is centered. This site is being built in Bootstrap which does have the ability to do 100% rows. So, in the settings in the page builder, I can add a class to the row of "container-fluid" to get my 100% row which will hold a background or some parallax effect. Now, I need to get my cells to be wrapped with a div with the class of container in order to center them. My main issue with the jquery is that it has grabbed every cell with the class I assigned and put it into the same wrapper. I can't have that. So for example, I want to take this

<div class="container-fluid">
  <div class="panel-grid-cell">
    <p>Some content</p>
  </div><!--END panel-grid-cell-->
  
    <div class="panel-grid-cell">
    <p>Some content</p>
  </div><!--END panel-grid-cell-->
  
    <div class="panel-grid-cell">
    <p>Some content</p>
  </div><!--END panel-grid-cell-->
</div><!--END container-fluid-->

and turn it into this

<div class="container-fluid">
  <div class="container">
    
    <div class="panel-grid-cell">
      <p>Some content</p>
    </div><!--END panel-grid-cell-->
    
      <div class="panel-grid-cell">
       <p>Some content</p>
      </div><!--END panel-grid-cell-->
    
      <div class="panel-grid-cell">
        <p>Some content</p>
      </div><!--END panel-grid-cell-->
    
  </div><!--eND container-->
</div><!--END container-fluid-->

  <div class="container">
    
    <div class="panel-grid-cell">
      <p>Some content</p>
    </div><!--END panel-grid-cell-->
    
      <div class="panel-grid-cell">
       <p>Some content</p>
      </div><!--END panel-grid-cell-->
    
      <div class="panel-grid-cell">
        <p>Some content</p>
      </div><!--END panel-grid-cell-->
  </div><!--eND container-->

So you see, the first chunk of code above has both the "container-fluid" and "container" class applied to it while the bottom chunk of code only has the class of container. Here is the jquery I have been working with

	//$(".panel-grid-cell").nextUntil(".stop").addBack().add(".stop")
       //   .wrapAll("<div class='container'></div>");

I thought what I could do was add a class of "start" and "stop" to the the cells them selves to give the jquery a "Hook" to latch onto. So it would add the class "container" right above the first cell with the class of start and add the ending div below the last cell with the class of "Finish". This almost worked but I could not get my jquery correct. Can you help me write some code that would work?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×