Javascript 如何在jQuery中基于鼠标滚轮滚动更改多个表的顺序？

我有一个div-thelist，其中包含一组html表。当鼠标滚轮转动时，我希望第一张桌子被移除并添加到底部。如果车轮转向另一个方向，则转向另一个方向

出于某种原因，下面的代码也可以工作，从我的理解来看，列表应该越来越长。既然我不明白为什么它是这样工作的，我就不能让它以另一种方式工作

有什么帮助吗？谢谢你

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

该方法应逐个删除数组中的条目，并将其添加到顶部，请参见编辑：

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

您应该将children声明和初始化语句放在if之前。 并使用if/else if

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

编辑：

---

您应该使用而不是

我也不确定这将如何工作，但是可以使用Javascript数组方法对其进行一些清理

pop-从数组中删除最后一项并将其返回

按-将项目添加到列表的末尾

shift-从数组中删除第一项并将其返回

取消移动-将项目添加到列表的开头

因此，您的代码如下所示：

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

---

我会这样做，为了更清楚地表达我们的意图，把列表中的第一个孩子放在列表的末尾

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

我认为这可能会更有效率，因为它只是重新排列现有的DOM元素，而不是调用html来更新列表的全部内容。不过，这种影响可能可以忽略不计