Я не могу переместить элемент в последнюю позицию и первую позицию

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

Попробуйте это:

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

Answer 2

Мое предложение:

• перейти первым: 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 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());
});

Answer 4

Используйте правильный селектор, чтобы исправить цель.

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

я использовал .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());
});