[英]Changing element position inside parent div using jquery
在我的div class="box"
有標題H1
和logo div
。 HTML顯示在下面,因此徽標圖像位於標題文本的下方。 現在,我想使用jquery(使用三元或其他方式)將H1
和logo div
位置改組為logo div
下方的標題,反之亦然。
HTML:
<div id="block">
<div id="box">
<h1><a>HEADING TEXT</a></h1>
<div class="logo">
<a>
<img src="images/logo.png">" alt="" width="150" height="150"/>
</a>
</div>
</div>
</div>
CSS:
#box {
width: 230px;
height: 500px;
}
#logo {
width: 230px;
height: auto;
}
#logo img {
width: 150px height:150px;
}
如何調整位置
觀看演示
var $box = $('#box').click(function(){
var $this = $(this), $h1 = $box.find('h1'), $div = $box.find('.logo');
if($h1.index() < $div.index()){
$h1.detach().insertAfter($div)
} else {
$h1.detach().insertBefore($div)
}
})
演示: 小提琴
您可以為此使用jquery的.detach()和.insertAfter()方法。
$("#box h1:first").detach().insertAfter(".logo");
由於在框中我們只有文本和徽標,因此我們可以切換而不僅僅是使用前置功能:
var logo = $('#box .logo'),
h1 = $('#box h1'),
box = $('#box'),
isLogo = false,
selector = function(){
isLogo = !isLogo;
return isLogo? logo : h1;
};
setInterval(function(){
var toSwitch = selector();
toSwitch.fadeOut('slow', function(){
toSwitch.prependTo(box).fadeIn('slow');
})
//or just
//selector().prependTo(box);
}, 3000)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.