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

Question

我有一个“菜单栏”（由于缺乏更好的用语），基本上是980px的固定宽度ul 。 li元素在页面加载时填充，并包含一个图像，一个跨度和一个分隔符（对于下一个li ）。

如果li元素太多，它们会溢出到下一行。 我想通过在列表填充后将所有溢出元素移动到另一个div中来运行一些JS / jquery来为此类事件做准备，这实际上是一个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中。而不是反复进行。）我不确定抓住第一个违规（边界推动）元素的最佳方法是什么。）

我敢肯定这很简单，我只是在努力找出导致问题的原因。

谢谢

编辑：见下文-解决了我的问题

Answer 1

修复！

问题是'overflow'div位于菜单div中，而我的CSS选择器针对所有后代。 因此，在第一次迭代之后，每个后续的.appendTo都以已经附加的对象为目标。 停止条件将永远不会达到，并且会不断迭代。堆栈溢出。

为了澄清起见，我的答案涉及将$('#menu li:last-child')更改$('#menu > li:last-child) 。 现在效果很好。