Comment changer l'ordre de plusieurs tables en fonction du défilement de la roulette de la souris dans jQuery?

Question

J'ai un div (#thelist) qui contient un tas de tables html. Quand la roulette de la souris est tournée, je veux que la première table soit enlevée et ajoutée au bas. (Et l'inverse si la roue est tournée dans l'autre sens).

Pour une raison quelconque, le code ci-dessous fonctionne également d'après ce que je comprends, la liste devrait être de plus en plus longue. Et puisque je ne comprends pas pourquoi ça marche de cette façon je ne peux pas le faire fonctionner dans l'autre sens ...

Une aide? Je vous remercie!!!

$("#thelist").bind("mousewheel",function(ev, delta) 
{ 
    if (delta > 0) 
    { 
     var children = $("#thelist").children('table'); 
     var tmpChild = children[0]; 
     children.push(tmpChild); 
    } 

    if (delta < 0) 
    { 
     // How to do this, btw ? 
    } 


    $("#thelist").html(children); 
} 

Answer 1

La méthode pop() doit supprimer les entrées dans votre tableau un par un et ajoutez splice() (voir EDIT) les vers le haut:

if(delta < 0){ 
    var child = children.pop(); 
    children.unshift(child); 
} 

Et vous devez mettre la déclaration des enfants et l'initialisation déclaration avant le si. et utiliser un if/else si

$("#thelist").bind("mousewheel",function(ev, delta) { 
    var children = $("#thelist").children('table'); 

    if (delta > 0){ 
     var tmpChild = children[0]; 
     children.push(tmpChild); 
    }else if (delta < 0) { 
     var tmpChild = children.pop(); 
     children.unshift(tmpChild); 
    } 

    $("#thelist").html(children); 
} 

EDIT:
vous devez utiliser le unshift() au lieu de splice()

Answer 2

Je ne sais pas comment cela pourrait fonctionner soit, mais il pourrait être nettoyé un peu en utilisant les méthodes Javascript Array.

pop - Supprimer le dernier élément de la matrice et le renvoyer.

push - Ajouter l'élément à la fin de la liste.

shift - Supprimez le premier élément de la matrice et renvoyez-le.

unshift - Ajouter l'élément au début de la liste.

donc votre code ressemblerait à ceci:

var children = $("#thelist").children('table'); 

if(delta > 0) 
{   
    var tmpChild = children.shift(); 
    children.push(tmpChild); 
} 
if(delta < 0) 
{ 
    var tmpChild = children.pop(); 
    children.unshift(tmpChild); 
} 

Answer 3

Je vais quelque chose comme ça, de transmettre plus clairement nos intentions, « prendre le premier enfant de #thelist et de le mettre à la fin de # theList »

$("#thelist").bind("mousewheel",function(ev, delta) 
{ 
    var list = $("#thelist"); 
    if (delta > 0) 
    { 
     list.children('table').first().appendTo(list); 
    } 

    if (delta < 0) 
    { 
     list.children('table').last().prependTo(list); 
    } 
}); 

Je soupçonne que cela peut aussi être un peu plus efficace car il réarrange simplement les éléments DOM existants plutôt que d'appeler html() mettre à jour le contenu de la liste. L'effet peut être négligeable, cependant.