Javascript 使用 jQuery 更改订单 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7628627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change order divs with jQuery
提问by David Apshid
<div class="test one">aaa</div>
<div class="test two">bbb</div>
<div class="test three">ccc</div>
Is possible change order this divs with jQuery? I would like receive:
是否可以使用 jQuery 更改此 div 的顺序？我想收到：
<div class="test two">bbb</div>
<div class="test three">ccc</div>
<div class="test one">aaa</div>
i can use only jQuery
我只能使用 jQuery
LIVE: http://jsfiddle.net/cmVyM/
直播：http: //jsfiddle.net/cmVyM/
I will make this only one - if document is ready.
我只会做这一个 - 如果文件准备好了。
回答by Zirak
Sounds like you want to move the first div after the last.
听起来您想在最后一个 div 之后移动第一个 div。
$.fn.insertAfterinserts the matched elements after the parameter:
$.fn.insertAfter在参数后插入匹配的元素：
$(".test.one").insertAfter(".test.three");
Edit: If you want a more general solution of adding the first to last, without resorting to the explicit classes:
编辑：如果您想要一个更通用的解决方案，将第一个添加到最后一个，而不诉诸显式类：
var tests = $('.test');
tests.first().insertAfter(tests.last());
回答by Loc Nguyen
Here is a simple example with navigate buttons.
这是一个带有导航按钮的简单示例。
HTML
HTML
<ul>
<li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>
Javascript with JQuery
Javascript 与 JQuery
$('.up').on('click', function(e) {
var wrapper = $(this).closest('li')
wrapper.insertBefore(wrapper.prev())
})
$('.down').on('click', function(e) {
var wrapper = $(this).closest('li')
wrapper.insertAfter(wrapper.next())
})
Try it here: https://jsfiddle.net/nguyenvuloc/vd105gst
回答by deviousdodo
Just do $('.one').insertAfter('.three');
做就是了 $('.one').insertAfter('.three');
回答by Geraldo Vilger
$("#botao").click(function(){
$("#a3").insertBefore("#a1");
});
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div>
<a id="botao">altera</a>
</div>
回答by Wannes
Just use insertAfter like the previous answer said
就像之前的答案说的那样使用 insertAfter
var eerste = $('.one');
var tweede = $('.two');
var derde = $('.three');
tweede.insertAfter(derde);
eerste.insertAfter(tweede);
回答by Farhan Erooth
If you want to change the order of group of divs with same class name (eg. given below):
如果要更改具有相同类名的 div 组的顺序（例如下面给出）：
<div class="wrapper">
<span class="text">First Heading</span>
<span class="number">1</span>
</div>
<div class="wrapper">
<span class="text">Second Heading</span>
<span class="number">2</span>
</div>
<div class="wrapper">
<span class="text">Third Heading</span>
<span class="number">3</span>
</div>
You can reorder it by the following jQuery code:
您可以通过以下 jQuery 代码对其重新排序：
$('.wrapper .number').each(function () {
$(this).insertBefore($(this).prev('.text'));
});
回答by YannҶ
You can do it by this
你可以这样做
var obj = $('.test.two');
obj.after(obj.prev());
so, div one and div two will change their's position.
所以，div 1 和div 2 会改变它们的位置。
I hope it can help you.
我希望它能帮助你。
