Tworzenie elementu poza rodzicem za pomocą jQuery

Question

Pracuję z pewnym znacznikiem, w którym mamy wiele bloków/kontrolek HTML umieszczonych w zewnętrznym kontenerze, ten kontener jest w zasadzie rzędem podstawowym o maksymalnej szerokości.

W pewnych sytuacjach potrzebuję klocków do wybicia się z tego kontenera, aby wykroczyć poza maksymalną szerokość i zająć całą szerokość, ale pozostaną w swojej pierwotnej pozycji pod względem indeksu. Zostań ze mną! Wygląda to następująco:

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

W efekcie czego chcę mieć to w następujący sposób:

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

Niestety nie mamy dostępu, aby to zrobić prawidłowo w html jQuery tak wygląda nasz najlepszy zakład.

Próbowałem zrobić coś takiego, ale bez skutku, ponieważ nie jest prawidłowo sformatowany html:

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

Ktoś ma jakieś pomysły to osiągnąć, bez całkowicie ponownie wpisywać cały DOM na zewnątrz, w przeciwnym razie będę Muszę ponownie zastosować ładunek wiązań.

Z góry dziękuję.

Answer 1

DEMO

Pierwszy unwrap() element .full-width. Spowoduje to usunięcie głównego i następnego elementu w .

$('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> 

Poniższy DOM usunie dwie div S i dodać je później

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

będzie to "nadzieją" rozwiązać problem z tylko proste JavaScript. Chociaż z tego powodu można napisać bardziej logiczny i rozszerzalny kod. To będzie prawdopodobnie wystarczy, aby zacząć zabawę

Korpus posiada pojemnik
wtedy mamy pobierania stary wiersz (identyfikator działa najlepiej)
pobierania fwblk i rgblk (pełnej szerokości bloku i regularne bloki)
tworzenia nowego div na newRow i ustawić nazwę klasy do row
usuwania fwblk i rgblk ze starego bloku
dodając rgblk do newRow
wreszcie, dodając fgblk newRow do ciała i stąd wstrzykując im do body

Answer 3

Można użyć kombinacji unWrap, next i andSelf. W ten sposób można uzyskać sam element i następujące elementy i odwijać je od rodzica.

Ref:

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

Kod:

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

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