Question

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

这可能是用jQuery改变命令吗？我想收到：

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

我只能使用jQuery

现场：http://jsfiddle.net/cmVyM/

如果文档准备就绪，我将只做一个。

Answer 1

听起来你想在最后一个之后移动第一个div。

$.fn.insertAfter在参数：

之后插入匹配的元素

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

http://jsfiddle.net/rP8EQ/

编辑：如果你想要一个更通用的解决方案来添加倒数第一个，而不需要使用显式类：

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

Answer 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

Answer 3

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

Answer 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/

Answer 5

只需使用insertAfter，就像之前的回答一样说

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

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

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

Answer 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/

Answer 7

你可以通过这个

来做到这一点

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

obj.after(obj.prev());

所以，div one和div 2将改变他们的位置。

我希望它可以帮到你。

用jQuery改变命令div

7 个答案: