内容简介:翻译自:https://stackoverflow.com/questions/32721681/making-an-element-extend-outside-its-parent-with-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>
翻译自:https://stackoverflow.com/questions/32721681/making-an-element-extend-outside-its-parent-with-jquery
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS 基础:块级元素、行内元素、替换元素、非替换元素
- CSS 技巧篇(六):display设置元素为行内元素时,元素之间存在间隙问题
- 探究行内元素和块级元素
- 重学前端:块级元素与内联元素
- 使CSS伪元素:在与主元素相同的高度之前
- 求非负元素数组所有元素能组合的最大字符串
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Introduction to Programming in Java
Robert Sedgewick、Kevin Wayne / Addison-Wesley / 2007-7-27 / USD 89.00
By emphasizing the application of computer programming not only in success stories in the software industry but also in familiar scenarios in physical and biological science, engineering, and appli......一起来看看 《Introduction to Programming in Java》 这本书的介绍吧!