Possible to sort rendered images based on class of parent div?
<p>I have some images that are wrapped within  containers like this:</p>

<pre><code>&lt;div id="swatchcontainer"&gt;
    &lt;div class="swatchimgouter"&gt;
        &lt;div class="swatchimginner"&gt;
            &lt;img src="whatever1.jpg" alt="some text" title="some text too"/&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="swatchimgouter"&gt;
        &lt;div class="swatchimginner swatchdisabled"&gt;
            &lt;img src="whatever2.jpg" alt="some text" title="some text too"/&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="swatchimgouter"&gt;
        &lt;div class="swatchimginner"&gt;
            &lt;img src="whatever3.jpg" alt="some text" title="some text too"/&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    etc., etc.

&lt;/div&gt;
</code></pre>

<p>It's not mission critical, but I got to thinking that it's probably possible to sort these images fairly easy using JQuery. I would like to place all images that are wrapped in the "swatchdisabled" class at the end.</p>

<p>There could be a couple of dozen of these images. They're all styled with <code>float:left</code> and so they display horizontally in rows. Even if there are a couple of dozen, there are only 2 rows. Each of these images is 30 pixels by 30 pixels.</p>

<p>It's just a UI consideration. Makes it a lot easier to keep track of which items are disabled and which are enabled by placing all disabled images at the end.</p>

<p>If it's fairly simple to do this, I'll also need to keep their inner div classes with them.</p>
