CODEWITHSUNDEEP
javascriptjqueryhtml
km457
km457

Reputation: 125

Inserting a Wrapper Div around specific instance of Div classes JS/Jquery

I'm trying to insert a wrapper div via javascript around a webform on a CMS-generated page that I don't have much access to. All the HTML content I'm trying to wrap lives in a stack of div's sharing the same class. The top div should be excluded. So I've got: 

<div class="rowClass">This div should be excluded</div>
<div class="rowClass">This div and the rest should be wrapped</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
...
<div class="rowClass">Last Row</div>

And what I'd like to achieve is basically:

    <div class="rowClass">This div should be excluded</div>

<div style=" width:1000px ; height:1500px; box-shadow: 1px 1px 2px"><!--This wrapper div would let me position and add a border bounding the divs below-->
  
    <div class="rowClass">This div and the rest should be wrapped</div>
    <div class="rowClass">Content</div>
    <div class="rowClass">Content</div>
    <div class="rowClass">Content</div>
    ...
    <div class="rowClass">Last Row</div>

</div><!--End wrapper div-->

I've tried all kinds of variations using insertAfter and insertBefore by specifying the class, and also attempted to specify where to place the div by using DOM child positioning, but I'm really out of my depth either way. Best I can attempt using jquery is something along the lines of:

$( "<div style=" width:1000px ; height:1500px; box-shadow: 1px 1px 2px">" ).insertBefore( ".rowClass:nth-of-type(2)" );
$( "</div>" ).insertAfter( ".rowClass:last-of-type");

Upvotes: 2

Views: 68

Answers (3)

Diljohn5741
Diljohn5741

Reputation: 434

This should serve the purpose

jQuery("div.rowClass:gt(0)").wrapAll('<div style=" width:1000px ; height:1500px; box-shadow: 1px 1px 2px"/>')

Upvotes: 0

Ted
Ted

Reputation: 14927

Try this code:

$('.rowClass:not(:first)').wrapAll('<div...')

That selector grabs all the divs with the class of rowClass and excludes the first one found with :not(:first). The function wrapAll wraps all the elements found (which excluded the first one) with the div code. Run the snippet below to see it work.

$(document).ready(function(){
  $('.rowClass:not(:first)').wrapAll('<div style=" width:1000px ; height:1500px; box-shadow: 1px 1px 2px">')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="rowClass">This div should be excluded</div>
<div class="rowClass">This div and the rest should be wrapped</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
...
<div class="rowClass">Last Row</div>

Upvotes: 1

TbWill4321
TbWill4321

Reputation: 8666

You need to create an element, and then append each element you want to it:

var $wrapper = $('<div style="border: 1px solid black;">');
$wrapper.insertBefore(".rowClass:nth-of-type(2)");
$('.rowClass').each(function(index) {
   if ( index !== 0 ) {
       $wrapper.append(this);
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rowClass">This div should be excluded</div>
<div class="rowClass">This div and the rest should be wrapped</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
<div class="rowClass">Last Row</div>

Upvotes: 0

Related Questions