用jQuery改变命令div

Question

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

有可能改变命令这个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

做就是了$('.one').insertAfter('.three');

Answer 3

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

的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