交换< div> ;? [英] swapping <div>?
问题描述
这是我的示例代码
<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>
我的ID只有一个div(例如id-3).我想与下一个<div>交换该<div>，因为<div>中有多个<div>，所以我不能使用next().
i'm having the id of only one div(for example id-3) . i want to swap that <div> with next <div>, since there is more than one <div> inside a <div> i cant use a next() .
预先感谢
推荐答案
.next(); 确实选择下一个同级项，而不是子div元素.但是，为确保选择下一个实际上是div的兄弟姐妹，应使用.next("div");.
.next(); does select the very next sibling, not the child div elements. However, to ensure that you select the next sibling that is actually a div, you should use .next("div");.
$("#id-3").before($("#id-3").next("div"));
只要您将最后一个div的ID更改为"id-4"，上面的代码就可以使用您给出的示例.
The code above works with the example you gave as long as you change your last div's id to "id-4".
或者，您可以复制并粘贴以下代码作为一个有效的示例:
Or, you can copy and paste this code for a working example:
<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>
这篇关于交换< div> ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
