使用 jQuery 更改订单 div答案

【问题标题】：change order divs with jQuery使用 jQuery 更改订单 div
【发布时间】：2011-10-02 19:18:10
【问题描述】：

<div class="test one">aaa</div>
<div class="test two">bbb</div>
<div class="test three">ccc</div>

是否可以使用 jQuery 更改此 div 的顺序？我想收到：

<div class="test two">bbb</div>
<div class="test three">ccc</div>
<div class="test one">aaa</div>

我只能使用 jQuery

直播：http://jsfiddle.net/cmVyM/

如果文件准备好了，我会只做一个。

【问题讨论】：

听起来像是 jQuery UI 可排序的工作。
我之前的回答中的几个 div 排序示例：stackoverflow.com/questions/7623819/…。
同这个问题：stackoverflow.com/questions/1363650/…

标签： javascript jquery html css

【解决方案1】：

听起来您想将第一个 div 移到最后一个之后。

$.fn.insertAfter在参数后面插入匹配的元素：

$(".test.one").insertAfter(".test.three");

http://jsfiddle.net/rP8EQ/

编辑：如果您想要一个更通用的解决方案，将第一个添加到最后一个，而不使用显式类：

var tests = $('.test');
tests.first().insertAfter(tests.last());

【讨论】：

这在有一组具有相同类名的 div 时不起作用。用test-one 说3 个div，用test-two 说3 个div，用test-three 说另外3 个div。对这种情况有什么建议吗？
@VineetKaushik 你想要发生什么，让所有test-one 都插入test-three 之后，还是一个特定的？如果前者已经发生，如果后者则选择更具体的选择器。

【解决方案2】：

这是一个带有导航按钮的简单示例。

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>

带有 JQuery 的 JavaScript

$('.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())
})

在这里试试：https://jsfiddle.net/nguyenvuloc/vd105gst

【讨论】：

它的好例子。但是如果我想保存更新的订单呢？
很好的解决方案！谢谢分享！

【解决方案3】：

只要$('.one').insertAfter('.three');

【讨论】：

【解决方案4】：

$("#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>

见：http://jsfiddle.net/GeraldoVilger/2B6FV/

【讨论】：

以防万一以后找到这个答案，您能否添加一些关于其工作原理的基本 cmets。谢谢。

【解决方案5】：

就像上一个答案所说的那样使用 insertAfter

http://jsfiddle.net/cmVyM/68/

var eerste = $('.one');
var tweede = $('.two');
var derde = $('.three');

tweede.insertAfter(derde);
eerste.insertAfter(tweede);

【讨论】：

【解决方案6】：

如果您想更改具有相同类名的 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>

您可以通过以下 jQuery 代码对其重新排序：

$('.wrapper .number').each(function () {
  $(this).insertBefore($(this).prev('.text'));
});

https://jsfiddle.net/farhanmae/9th3drvd/

【讨论】：

【解决方案7】：

你可以这样做

var obj = $('.test.two');

obj.after(obj.prev());

所以，div 1 和 div 2 会改变它们的位置。

希望对你有帮助。

【讨论】：