javascript - 我无法将元素 move 到最后一个位置和第一个位置

Question

我的国家/地区列表我无法 move 项目的当前位置、最后位置和第一个位置。但是上下 move 元素的位置是正确的。

我的 HTML:

<div class="ListCountries">
  <div class="item">Argentina</div>
  <div class="item">Bolivia</div>
  <div class="item">Brasil</div>
  <div class="item">Chile</div>
  <div class="item">Colombia</div>
  <div class="item">Ecuador</div>
  <div class="item">Paraguay</div>
  <div class="item">Peru</div>
  <div class="item">Uruguay</div>
  <div class="item">Venezuela</div>
</div>

我的 Javascript/jQuery:

$(".item").append("<p><button class='down'>down↓</button><button class='up'>up↑</button><button class='first'>Move First</button><button class='last'>Move last</button></p>");

$(document).on("click",".up",function() {
    var ob = $(this).closest('.item');
    ob.insertBefore(ob.prev());
});

$(document).on("click",".down",function() {
    var ob = $(this).closest('.item');
    ob.insertAfter(ob.next());
});

$(document).on("click",".first",function() {
    var ob = $(this).closest('.item');
    ob.insertAfter(ob.prepend());
});

$(document).on("click",".last",function() {
    var ob = $(this).closest('.item');
    ob.insertAfter(ob.append());
});

我的 jsFiddle:

https://jsfiddle.net/cds0f5yp/20/

我做错了什么？

Answer 1

试试这个:

$(".item").append("<p><button class='down'>down↓</button><button class='up'>up↑</button><button class='first'>Move First</button><button class='last'>Move last</button></p>");

$(document).on("click",".up",function() {
    var ob = $(this).closest('.item');
    ob.insertBefore(ob.prev());
});

$(document).on("click",".down",function() {
    var ob = $(this).closest('.item');
    ob.insertAfter(ob.next());
});

$(document).on("click",".first",function() {
    var ob = $(this).closest('.item');
    ob.parent().prepend(ob);
});

$(document).on("click",".last",function() {
    var ob = $(this).closest('.item');
    ob.parent().append(ob);
});

Fiddle Link