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

Question

I have a "menu bar" (for lack of a better term) which is basically a fixed width ul at 980px. The li elements are populated on page load, and contain an image, a span, and a divider (for the next li ).

If there are too many li elements, they overflow onto the next line. I want to prepare for such an event by running some JS/jquery after the list is populated to move all of the overflow elements into another div, which will essentially be a css hover menu with the elements inside it (it will say '...view more' or similar).

My initial approach has been to check, after populating the menu, if the menu's total width exceeds a certain number, and if so, to append the last element to the new div for overflow. This function would either loop with a variable checking the width of the menu, or call itself recursively, whichever. I got the basic functionality working with an if statement, but it was a single iteration to test - the last element got moved to the div successfully. Unfortunately, when I tried to iterate it (loop or recursive) the browser seemed to go into an endless loop in the js and never loaded the page properly.

A version of my current attempt looks like this:

    /**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();
       }
    }

With this version or with a while loop the browser eventually crashes, but I'm not sure why. I'm sure it's something obvious.

I'd like to either fix my current implementation, or do it some other way (perhaps - if width is longer, grab ALL elements that push beyond that width, and throw them in the div. All at once, rather than iterating. But I'm not sure what the best way to grab the first offending (boundary pushing) element would be.)

I'm sure this is something simple, I'm just struggling to figure out what's causing the issue now.

Thanks

edit: see below - fixed my issue

Answer 1

Fixed it!

The issue was that the 'overflow' div was inside the menu div and my CSS selectors targeted all descendants. So, after the first iteration, every subsequent .appendTo targeted the one which had already been appended. The stopping condition would never be reached, and it iterated endlessly..stack overflow.

For clarification, my answer involved changing $('#menu li:last-child') to $('#menu > li:last-child) . Works great now.