CODEWITHSUNDEEP
javascriptjquerylistelementmove
Renato Ramos
Renato Ramos

Reputation: 429

I can't move element a lastposition and first position

My list of countries I can't move item current and last position and firs position. But move element down and up position is correct.

My 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>

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

My jsFiddle:

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

What am I doing wrong?

Upvotes: 1

Views: 163

Answers (5)

Rajan
Rajan

Reputation: 1497

Try this:

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

Upvotes: 1

Michele
Michele

Reputation: 34

i used .prependTo() and .appendTo() on the item passing as target his parent to achieve what you are looking for. Here's my code for move first / last.

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

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42044

My proposal is:

  • move first: prepend() to your ListCountries

  • move last: append() to your ListCountries

    $(document).on("click",".first",function() { // move at beginning var ob = $(this).closest('.ListCountries'); ob.prepend($(this).closest('.item')); });

    $(document).on("click",".last",function() { // move at end 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>

Upvotes: 1

Alessandro Romeo
Alessandro Romeo

Reputation: 108

Use correct selector to correct target. 

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

Upvotes: 1

Robin Zigmond
Robin Zigmond

Reputation: 18249

The following change is working fine for me:

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

Upvotes: 1

Related Questions