我无法将元素移动到最后一个位置和第一个位置

Question

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

我的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

我在作为目标传递的项目上使用 .prependTo() and .appendTo() 他的 parent 来实现您正在寻找的东西。这是我先/后移动的代码。

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

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

Answer 2

以下更改对我来说效果很好：

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

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

Answer 3

使用正确的选择器来更正目标。

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

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

https://jsfiddle.net/taegqpk8/

Answer 4

我的建议是：

首先移动：prepend() 到您的 ListCountries
移到最后：append() 到您的 ListCountries

$(文档).on("click",".first",function() { // 开始移动 var ob = $(this).closest('.ListCountries'); ob.prepend($(this).closest('.item')); });

$(文档).on("click",".last",function() { // 移动到最后 var ob = $(this).closest('.ListCountries'); ob.append($(this).closest('.item')); });

$(".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('.ListCountries');
    ob.prepend($(this).closest('.item'));
});

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

.item{
    width: 400px;
    height: 60px;
    background-color: #FFEEAA;
    border: 2px dotted Orange;
    border-radius: 7px;
    padding: 7px;
    margin-bottom: 7px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 5

试试这个：

$(".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

我无法将元素移动到最后一个位置和第一个位置

I can't move element a lastposition and first position

javascript

jquery

element

list

move