Question

我无法移动项目的国家/地区，当前位置和最后位置以及第一位置。但是将元素上下移动是正确的。

我的HTML：

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

我的Javascript / jQuery：

inst/rstudio/connections/

我的jsFiddle：

this operator has not been explicitly implemented

我在做什么错了？

Answer 1

我将.prependTo()和.appendTo()用于传递给他父母的目标物品上，以实现您的期望。这是我先移动/后移动的代码。

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

$（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").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

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

5 个答案: