Looping through elements and changing classes with switchClass
<p>Having read through my post before I submitted it I think it might be a bit confusing so as a very basic summary I am trying to get the effect that we would see if <em>float:bottom</em> existed, and items were removed (although with a pleasant little animation rather than a snap!).  </p>

<p>I have a column (a div element) on the page, with seven child elements, stacked up from the bottom using position absolute.<br>
Each child element has class related to its position in the column - item1, item2 etc, and is assigned an id automatically when it is created.  </p>

<p>As events progress on the page, one or more of these child elements will be removed from a random position in the column and what I want to happen is for the remaining elements to shuffle down the column, leaving space at the top (Which will be filled by newly created elements with appropriate class names).  </p>

<p>However, while I can get the child elements to drop down if 1 is removed, I cannot seem to get them to drop down if more than 1 is removed.  </p>

<p>Iv been trying to do this by counting backward through the items in the column but to no avail. This is one of the loops Iv tried (I think this one worked for replacing one item anyway)  </p>

<p>I have not used .each() because I could never get it to work with this, although I have no problem with using it if it does.  </p>

<pre><code>for (x = 6; x &gt; 0; x--)
{
    var z = $('#'+MyCol).find('.item'+(x+1)).attr('id');
    var ztheClass = "item" + x+1;
    $('#'+z).css({'background-color':'#FFFF00'});
    var zKop = 'item'+(x+1);
    $('#'+z).switchClass('.'+ztheClass,zKop,500,'easeOutBounce');
}
</code></pre>

<p>Can anyone give me any help with this please.  </p>

<p>Cheers  </p>

<p>BS  </p>

<p><strong>UPDATE</strong>  </p>

<p>Okay then, a little update just in case anyone comes along looking for a similar answer:  </p>

<p>I had to give up on the code I had because it became too confused as I tried lots of different things. However I did find a kind of workaround...  </p>

<p>To get the effect of <em>float:bottom</em>, along with a reasonable animated effect to go with it you can use <a href="http://masonry.desandro.com/" rel="nofollow">Masonry</a>.  </p>

<p>Using the most basic example shown on the site, and setting the container element width to only just larger than the inner elements you create a nice stack. Removing an item from the stack and using the <em>prepend</em> function a new item can then be added at the top of the column. Including the animate function makes it all look nice.  </p>

<p>Its not an <em>ideal</em> solution since it requires a little more HTML to get a bunch of columns in a nice neat line, but it works.</p>
