Làm một yếu tố mở rộng bên ngoài mẹ của nó với jQuery

Question

Tôi đang làm việc với một số mark-up nơi chúng tôi có một số khối html/điều khiển ngồi trong một thùng chứa bên ngoài, container này về cơ bản là một nền tảng hàng với max-width.

Trong những tình huống nhất định tôi cần khối để thoát ra khỏi thùng chứa này, để mở rộng vượt ra ngoài max-width và chiếm toàn bộ chiều rộng, nhưng vẫn còn ở đó là vị trí ban đầu về chỉ số. Ở lại với tôi! Điều này có vẻ như sau:

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

Trong thực tế những gì tôi muốn có là như sau:

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

Đáng tiếc là chúng ta không có quyền truy cập để làm điều này đúng trong html để jQuery trông đặt cược tốt nhất của chúng tôi.

Tôi đã cố gắng làm một cái gì đó như thế này, nhưng không có kết quả như nó không được định dạng chính xác html:

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

Bất cứ ai có bất kỳ ý tưởng đạt được điều này, mà không hoàn toàn bằng văn bản cho toàn bộ DOM ra một lần nữa, nếu không tôi sẽ phải áp dụng lại một tải trọng các ràng buộc.

Xin cảm ơn trước.

Answer 1

DEMO

Trước unwrap() yếu tố .full-width. Thao tác này sẽ xóa chính .row, sau đó wrap() các phần tử tiếp theo và trước đó trong .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> 

DOM này sẽ gỡ bỏ hai div s và thêm chúng sau đó

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

này sẽ "hy vọng" giải quyết vấn đề của bạn với JavaScript chỉ đơn giản. Mặc dù, mã logic và mở rộng hơn có thể được viết với ý nghĩ đó. Điều này có lẽ sẽ là đủ cho bạn để có được đi

Cơ thể giữ container
sau đó chúng tôi lấy hàng cũ (một định làm việc tốt nhất)
lấy fwblk và rgblk (khối fullwidth và khối thường xuyên)
tạo một div mới tại newRow và thiết lập tên lớp để row
loại bỏ fwblk và rgblk từ khối cũ
thêm rgblk để newRow
cuối cùng, thêm fgblk và newRow với cơ thể vì vậy tiêm chúng vào body

Answer 3

Bạn có thể sử dụng một sự kết hợp của unWrap, next và andSelf. Bằng cách này, bạn có thể tự lấy phần tử và sau đó bỏ chúng ra khỏi bố mẹ của nó.

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/