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

Answer 2

您可以获得对列表项的引用，并将其插入到其兄弟之前/之后。

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

此外，请务必正确关闭您的图像。您的向下箭头图像均格式错误。

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