How do I hide and check the attribute of another element for each li in an unordered list during a loop?
<p>Okay - I am trying to reverse loop through the <code>&lt;li&gt;</code> contained in an unordered list. During this loop I want to remove each <code>&lt;li&gt;</code> and then compare the height of it's parent column to that of an adjacent column until it is =&lt; the other. Once this is true break the loop and display remaining <code>&lt;li&gt;</code>. Before this happens I am using shuffle.js to shuffle the list. I have been able to capture the height of both columns but my code seems to be messed up once I start looping through the <code>&lt;li&gt;</code></p>

<p>Here is the HTML short version...</p>

<pre><code>&lt;body&gt;  
  &lt;div id="wrap"&gt;
        &lt;div id="header"&gt;&lt;/div&gt;
             &lt;div id="main"&gt;This is the column that would set the height that determines the amount of [li] shown
            &lt;/div&gt;
        &lt;div id="sidebar"&gt;
            &lt;ul id="shuffleunorderedlist"&gt;
                &lt;li id="promo_1"&gt;
                    1
                &lt;/li&gt;
                &lt;li id="promo_2"&gt;
                    2
                &lt;/li&gt;
                &lt;li id="promo_3"&gt;
                    3
                &lt;/li&gt;
                &lt;li id="promo_4"&gt;
                    4
                &lt;/li&gt;
                &lt;li id="promo_5"&gt;
                    5
                &lt;/li&gt;
                &lt;li id="promo_6"&gt;
                    6
                &lt;/li&gt;
                &lt;li id="promo_7"&gt;
                    7
                &lt;/li&gt;
                &lt;li id="promo_8"&gt;
                    8
                &lt;/li&gt;
                &lt;li id="promo_9"&gt;
                    9
                &lt;/li&gt;
                &lt;li id="promo_10"&gt;
                    10
                &lt;/li&gt;
                &lt;li id="promo_11"&gt;
                    11
                &lt;/li&gt;
                &lt;li id="promo_12"&gt;
                    12
                &lt;/li&gt;

            &lt;/ul&gt;
        &lt;/div&gt;
&lt;div id="footer"&gt;&lt;/div&gt;
</code></pre>

<p>
        </p>

<p>And here is the jQuery and Javascript I have written so far.</p>

<pre><code>&lt;script type="text/javascript"&gt;
jQuery(function($)
{
    window.onload = function()
    { 
        $('#shuffleunorderedlist').shuffle();   //********** Shuffle List 
    };
    var mainHeight = $('#main').height();   //********** Capture 'main' height 
    var sidebarHeight = $('#sidebar').height();     //********** Capture 'sidebar'     height 
        if (mainHeight &gt; sidebarHeight)     //********** Compare 'sidebar' height 
            {
                var liCheck = $('div#sidebar.li').reverse().each(function ()    //********** reverse Loop through &lt;li&gt;'s  
                    {
                    while(liCheck())
                        {
                           $('li').hide(); //********** reverse Loop through &lt;li&gt;'s 
                             if (sidebarHeight =&lt; mainHeight) 
                                    {
                                    break;  // breaks loop completely   //**********  Output &lt;li&gt;'s that are left 
                                    }
                        }  
                    }   
            }               
});
&lt;/script&gt;
</code></pre>

<p>So basically why isn't this working? Where am I breaking it? How can I get it to work?</p>

<p>Any suggestions, Help and answers are greatly appreciated.</p>
