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>

这里是普通街区
全宽块在这里
这里是普通街区

实际上，我想要的是：

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

$（'div.row>.full width'）。每个（函数（）{
$（本）。在（“”）之前。在（“”）之后；
});

任何人都有实现这一点的想法，而不必再次完全写出整个DOM，否则我将不得不重新应用大量绑定

提前谢谢

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

这将“希望”用简单的JavaScript解决您的问题。尽管如此，在编写更具逻辑性和可扩展性的代码时可以考虑到这一点。 这可能足以让你行动起来

主体容纳容器
然后我们将检索旧的行（标识符最有效）
检索fwblk和rgblk（全宽块和常规块）
在newRow创建一个新的div，并将类名设置为

row

从旧块中删除fwblk和rgblk
将rgblk添加到新行

---

最后，将fgblk和newRow添加到body，从而将它们注入

body

您可以使用

展开

、

下一步

和

和self

的组合。通过这种方式，您可以获取元素本身和以下内容，并从其父元素中展开它们

参考：

代码：

演示：

第一个是

全宽
元素。这将删除主
.row
，然后删除
.row
中的下一个和上一个元素


$（'div.row>.full width'）。每个（函数（）{
var$rowDiv=$（''）；
$（this.unwrap（'.row'）；
$（this.prev（）.wrap（$rowDiv）；
$（this.next（）.wrap（$rowDiv）；
});

这里是普通街区
全宽块在这里
这里是普通街区
您可能仅通过CSS就可以实现这一点。请放一个工作演示。是的，我不想走css路线，我考虑过使用负边距等，但遇到了跨浏览器的问题。不过，一个起点演示将大大有助于获得更多的响应。@isherwood，我同意。