Question

我正在使用一些标记，我们在外部容器中有许多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，否则我将不得不重新应用大量绑定。

提前致谢。

Answer 1

<强> DEMO

首先 unwrap() .full-width元素。这会删除主.row，然后 wrap() .row中的下一个和上一个元素。

＆＃13;

$('div.row > .full-width').each(function() {
  var $rowDiv = $('<div class="row">');
  $(this).unwrap('.row');
  $(this).prev().wrap($rowDiv);
  $(this).next().wrap($rowDiv);
});

＆＃13;

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

＆＃13;

Answer 2

您可以使用unWrap，next和andSelf的组合。通过这种方式，您可以获取元素本身和以下内容，并从其父级中取出它们。

价：

代码：

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

演示：http://jsfiddle.net/kLw6sv29/

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

2 个答案: