交换<div>？
交换<div>？
提问于 2011-02-06 14:33:23
这是我的示例代码
<div id="id-1"><div>sampledata</div><span>sampledata</span></div>
<div id"id-2"><div>sampledata</div><div> smpledata</div></div>
<div id"id-3"><div>sampledata</div><div> smpledata</div></div>
<div id"id-3"><div>sampledata</div><div> smpledata</div></div>我只有一个div的id (例如id-3)。我想把那个<div>换成下一个<div>，因为在一个<div>中有多个<div>，我不能使用next()。
提前感谢
回答 2
Stack Overflow用户
发布于 2011-02-06 14:41:17
好的，选择div，然后选择find next和insertAfter next
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<style>
.innderdiv4{
backgrournd: green;
}
.innderdiv3{
background: blue;
}
</style>
<script>
$(function (){
var div = $('#id3');
var next = $(div).next();
if(confirm("Are you sure you want to do it"))
{
$(div).insertAfter(next);
}
})
</script>
<div id="container">
<div id="id3">
<div class="innderdiv3">div 3</div>
<div class="innderdiv3">div 3</div>
</div>
<div id="id4">
<div class="innderdiv4">div 4</div>
<div class="innderdiv4">div 4</div>
</div>
</div>Stack Overflow用户
发布于 2011-02-06 15:23:29
.next(); 不会选择下一个同级元素，而不是子元素。然而，为了确保您选择的下一个同级实际上是一个div，您应该使用.next("div");。
$("#id-3").before($("#id-3").next("div")); 只要您将最后一个div的id更改为"id-4“，上面的代码就可以使用您给出的示例。
或者，您可以复制并粘贴以下代码作为工作示例：
<html>
<head>
<title>Div Swap Test Page</title>
<style type="text/css">
#id-1,#id-2,#id-3,#id-4 {height: 50px; margin:10px 0; border:solid 1px #000}
#id-3 {border:solid 1px #D00}
#id-4 {border:solid 1px #0D0}
</style>
</head>
<body>
<div id="id-1"><div>This is div #1</div><span>I am first.</span></div>
<div id="id-2"><div>This is div #2</div><span>I am second.</span></div>
<div id="id-3"><div>This is div #3</div><span>I am third.</span></div>
<div id="id-4"><div>This is div #4</div><span>I am last.</span></div>
<p><button id="btn"><span>Swap</span></button></p>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("#id-3").before($("#id-3").next("div"));
});
});
</script>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4911998
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号