Geek Answers Handbook

Creating an element outside its parent using jQuery

I work with some markup, where we have several html blocks / elements located inside an external container, this container is the main line with the maximum width.

In some situations, I need blocks to break out of this container, go beyond the maximum width and occupy the full width, but remain in its original position in terms of the index. Stay with me! It looks like this:

<div class="row"> <div><em>Regular block here</em></div> <div class="full-width"><em>Full width block here</em></div> <div><em>Regular block here</em></div> </div>

Essentially, I want to have the following:

 <div class="row"> <div><em>Regular block here</em></div> </div> <div class="full-width"><em>Full width block here</em></div> <div class="row"> <div><em>Regular block here</em></div> </div>

Unfortunately, we do not have access to do this correctly in html, so jQuery looks its best.

I tried to do something like this, but to no avail, as it did not format html correctly:

 $('div.row > .full-width').each(function() { $(this).before('</div>').after('<div>'); });

Someone has an idea to achieve this without writing the entire DOM completely, otherwise I will have to reload the bindings.

Thanks in advance.

+8
javascript jquery html css
source share
3 answers

Demo

The first unwrap() element is .full-width . This will remove the main .row , then wrap() next and previous elements in .row .

 $('div.row > .full-width').each(function() { var $rowDiv = $('<div class="row">'); $(this).unwrap('.row'); $(this).prev().wrap($rowDiv); $(this).next().wrap($rowDiv); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div><em>Regular block here</em></div> <div class="full-width"><em>Full width block here</em></div> <div><em>Regular block here</em></div> </div>
+1
source share
 <div class="row" id="oldrow"> <div><em>Regular block here</em></div> <div class="full-width" id="fwblk"><em>Full width block here</em></div> <div id="rgblk"><em>Regular block here</em></div> </div>

The next DOM will remove the two div and add them afterwards

 body = document.body; // body or the container oldrow = document.getElementById("oldrow"); fwblk = document.getElementById("fwblk"); rgblk = document.getElementById("rgblk"); newRow = document.createElement("div"); newRow.className="row"; oldrow.removeChild(fwblk); oldrow.removeChild(rgblk); newRow.appendChild(rgblk); // insert to body body.appendChild(fwblk); body.appendChild(newRow);

This will “hopefully” solve your problem using simple JavaScript. Although, more logical and extensible code can be written with this in mind. This will probably be enough for you to hit the road.

The body holds the container, then we retrieve the old string (the identifier works best)
getting fwblk and rgblk (full-width block and regular blocks)
creating a new div in newRow and set the class name to row
removing fwblk and rgblk from the old block
adding rgblk to newRow
finally adding fgblk and newRow to the body by typing them in body

0
source share

You can use a combination of unWrap , next and andSelf . This way you can get the element itself and the following and expand them from your parent.

Ref:

the code:

 $('div.row > .full-width').each(function() { $(this).next(':not(".full-width")').andSelf().unwrap(); });

Demo: http://jsfiddle.net/kLw6sv29/

0
source share

More articles:


All Articles