使用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，则将其与下面的li互换位置。

- panthro

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() );
});​

- Jonathan Payne

---

这只适用于相邻的子元素，对吧？我的意思是，如果你想将第一个子元素与第四个子元素交换，这样做行不通，我猜。 - gsamaras

Answer 2

你可以获取列表项的引用，并在其兄弟节点之前/之后插入它。

$(".upArrow").on("click", function(){
  var li = $(this).closest("li");
  li.insertBefore( li.prev() );
});

此外，一定要正确关闭图像。您的向下箭头图像全部格式不正确。

- Sampson

Answer 3

尝试像这样做：

$(".upArrow").click(function() {
  var thisItem = $(this).closest('li');
  var prevItem = thisItem.prev();

  if(prevItem.length != 0) {
    thisItem.before(prevItem);
  }
});

$(".downArrow").click(function() {
  var thisItem = $(this).closest('li');
  var nextItem = thisItem.next();

  if(nextItem.length != 0) {
    thisItem.after(nextItem);
  }
});

- Dominic