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>

每个人都有 up子。我在座各位:

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

});

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

});

我如何看到,当用户点击arrow时,就会把li与上 above一).,当他们点击时,就会用下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() );
});

此外,确保适当关闭你的图像。你们的 down刻画全都是恶意的。

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

友情链接