Ein Element erweitern außerhalb seiner Eltern mit jQuery

Question

Ich arbeite mit einigen Mark-up, wo wir eine Reihe von HTML-Blöcke/Steuerelemente in einem äußeren Container sitzen, dieser Container ist im Grunde eine Fundament Reihe mit einer maximalen Breite.

In bestimmten Situationen brauche ich Blöcke aus diesem Container zu brechen, über die maximale Breite zu erweitern und die volle Breite zu besetzen, aber in seiner ursprünglichen Position in Bezug auf Index bleiben. Bleib bei mir! Dies sieht wie folgt aus:

<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> 

In der Tat, was ich haben will, ist wie folgt:

<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> 

Leider Zugang haben wir das nicht richtig in HTML zu tun, so jQuery unsere beste Wette aussieht.

Ich versuchte, so etwas wie dies zu tun, aber ohne Erfolg, da es nicht richtig HTML formatiert ist:

bekam

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

Wer irgendwelche Ideen, diese zu erreichen, ohne vollständig wieder den gesamten DOM aus zu schreiben, sonst werde ich muss eine Last von Bindungen erneut anwenden.

Vielen Dank im Voraus. Dies wird "hoffentlich" lösen Ihr Problem mit nur einfachen JavaScript

Answer 1

DEMO

Erste unwrap() das .full-width Element. Dies entfernen die wichtigsten .row, dann wrap() die nächsten und vorherigen Elemente 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>

Answer 2

<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> 

Die folgende DOM werden die beiden div s entfernen und sie

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); 

danach hinzufügen. Obwohl, logischer und erweiterbarer Code kann in diesem Sinne geschrieben werden. Diese wird wahrscheinlich genug für Sie

Der Körper des Behälters wir
dann die alte Reihe Abrufen
Abrufen fwblk und rgblk (voller Breite Block und regelmäßige Blöcke) hält in Gang zu bringen (eine Kennung funktioniert am besten)
ein neues div bei newRow und legen sie die Klassennamen row
Entfernen fwblk und rgblk aus altem Block
Hinzufügen rgblk Erstellen NewRow
schließlich Zugabe fgblk und newRow zu Körper damit sie an die body Injektion

Answer 3

Sie können eine Kombination aus unWrap, next und andSelf verwenden. Auf diese Weise können Sie das Element selbst und das folgende Element abrufen und es von seinem übergeordneten Element entfernen.

Ref:

• https://api.jquery.com/unwrap/
• https://api.jquery.com/andself/

Code:

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

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