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

使用jQuery交换列表元素

3 个答案: