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

Question

我有一个“菜单栏”(缺少更好的术语)，它基本上是固定宽度 ul 980 像素。 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 中。一次性完成，而不是迭代。但我不确定捕获第一个违规(边界插入)元素的最佳方法是什么。)

我确信这很简单，我现在正在努力找出导致问题的原因。

谢谢

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

Answer 1

已修复!

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

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