使用jQuery交换列表元素

Question

我有一个清单:

<li>item one<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item two<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item three<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item four<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item five<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>

每个人都有一个向上和向下箭头.在我的jquery中我有:

$(".upArrow").click(function() {

});

$(".downArrow").click(function() {

});

我怎样才能得到它,以便当用户点击箭头时,它会将li与上面的箭头交换,当他们点击它时,它会与下面的li交换(如果存在).

Answer 1

jsFiddle(http://jsfiddle.net/A9j3E/6/)

$(".upArrow").click(function() {
    $(this).parent().insertBefore( $(this).parent().prev() );
});

$(".downArrow").click(function() {
    $(this).parent().insertAfter( $(this).parent().next() );
});?