javascript – 使用jQuery使元素扩展到其父级之外

我正在使用一些标记,我们在外部容器中有许多html块/控件,这个容器基本上是一个具有最大宽度的基础行.

在某些情况下,我需要块来突破这个容器,延伸超出最大宽度并占据整个宽度,但在索引方面保持在原始位置.跟我在一起！这看起来如下：

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

实际上我想要的是如下：

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

不幸的是我们无法在html中正确地执行此操作,因此jQuery看起来是我们最好的选择.

我试过做这样的事情,但没有用,因为它没有正确格式化html：

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

任何人都有任何实现这一点的想法,而没有完全重写整个DOM,否则我将不得不重新应用一大堆绑定.

提前致谢.

首先是 unwrap() .full-width元素.这将删除主.row,然后删除.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>