1
votes

Je ne peux pas déplacer l'élément d'une dernière position et d'une première position

Ma liste de pays Je ne peux pas déplacer l'élément actuel et la dernière position et la première position. Mais déplacer l'élément vers le bas et vers le haut est correct.

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

Mon Javascript / jQuery:

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

Mon jsFiddle:

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

Qu'est-ce que je fais de mal?

javascript jquery list element move

6 commentaires

@RobinZigmond OP demande pourquoi les boutons "déplacer en premier" et "déplacer en dernier" ne fonctionnent pas comme prévu.

raté ça, merci @ChrisG

Cela le fait: jsfiddle.net/khrismuc/5koysrqw

@Chris G merci beaucoup, mais j'ai un petit problème. Je ne peux pas le faire dynamiquement avec plusieurs listes de pays. ne pas mélanger les deux listes. Vous: jsfiddle.net/uvzq8cmw/2 Mon: jsfiddle.net/uvzq8cmw/4

Correction: jsfiddle.net/khrismuc/2jdzu98c (et pour une raison quelconque, vous êtes retourné à insertBefore dans "move last")

@Chris G, maintenant si tout fonctionne, très sympathique.

5 Réponses :

1
votes

J'ai utilisé .prependTo () et . appendTo () sur l'élément passant comme cible à son parent pour réaliser ce que vous recherchez. Voici mon code pour déplacer en premier / dernier.

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

0 commentaires

1
votes

La modification suivante fonctionne bien pour moi:

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

0 commentaires

1
votes

Utilisez le sélecteur approprié pour corriger la cible.

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

0 commentaires

1
votes

Ma proposition est:

déplacer en premier: ajouter () à votre ListCountries li>
déplacer en dernier: ajouter () à votre ListCountries strong >

$ (document) .on ("click", ". first", function () { // se déplace au début var ob = $ (this) .closest ('. ListCountries'); ob.prepend ($ (this) .closest ('. item')); });

$ (document) .on ("click", ". last", function () { // déplacer à la fin var ob = $ (this) .closest ('. ListCountries'); ob.append ($ (this) .closest ('. item')); });

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

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

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

0 commentaires

1
votes

Essayez ceci:

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

2 commentaires

merci, votre solution est meilleure, travaillant dans plusieurs listes-pays sans mélanger les deux listes. :)

@RenatoRamosPuma :)