Javascript 将溢出一个div的所有元素水平移动到另一个div中

我有一个“菜单栏”（因为没有更好的术语），它基本上是一个固定宽度的

ul

980px。

li

元素在页面加载时填充，并包含图像、跨距和分隔符（对于下一个

li

）

如果

li

元素太多，则会溢出到下一行。我想在填充列表后运行一些JS/jquery，将所有溢出元素移动到另一个div中，这实际上是一个css悬停菜单，其中包含元素（它会说“…查看更多”或类似内容），从而为此类事件做好准备

我最初的方法是，在填充菜单后，检查菜单的总宽度是否超过某个数字，如果超过，则将最后一个元素附加到新的div以防溢出。这个函数要么使用一个检查菜单宽度的变量循环，要么递归地调用自己，以两者中的任何一个为准。我使用

if

语句获得了基本功能，但这是一个需要测试的单一迭代-最后一个元素成功地移动到了div中。不幸的是，当我尝试迭代它（循环或递归）时，浏览器在js中似乎陷入了无休止的循环，并且从未正确加载页面

我当前尝试的版本如下所示：

    /**code for populating etc happens here ... then calls trimList(); */
    function trimList(){
       var menuWidth = $('#menu').width();
       if(menuWidth > 700){
          $('#menu li:last-child').appendTo('#overflowList');
          trimList();
       }
    }

使用此版本或使用

while

循环，浏览器最终会崩溃，但我不确定原因。我相信这是显而易见的

我想修复我当前的实现，或者用其他方法（也许-如果宽度更长，抓取所有推过该宽度的元素，并将它们一次性扔到div中，而不是迭代。但我不确定抓取第一个违规（边界推送）元素的最佳方法是什么。）

我相信这很简单，我只是在努力找出问题的根源

谢谢

编辑：见下文-修复我的问题

修复它

问题是“overflow”div在menu div中，我的CSS选择器针对所有子体。因此，在第一次迭代之后，每个后续的

.appendTo

都以已经追加的为目标。停止条件永远不会达到，它会无休止地迭代..堆栈溢出

为了澄清，我的回答涉及将

$（“#menu li:last child”）

更改为

$（“#menu>li:last child）

。现在效果很好