Question

I have some images that are wrapped within containers like this:

<div id="swatchcontainer">
    <div class="swatchimgouter">
        <div class="swatchimginner">
            <img src="whatever1.jpg" alt="some text" title="some text too"/>
        </div>
    </div>

    <div class="swatchimgouter">
        <div class="swatchimginner swatchdisabled">
            <img src="whatever2.jpg" alt="some text" title="some text too"/>
        </div>
    </div>

    <div class="swatchimgouter">
        <div class="swatchimginner">
            <img src="whatever3.jpg" alt="some text" title="some text too"/>
        </div>
    </div>

    etc., etc.

</div>

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.

There could be a couple of dozen of these images. They’re all styled with float:left 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.

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.

If it’s fairly simple to do this, I’ll also need to keep their inner div classes with them.

Answer 1

Try like this:

$('.swatchdisabled').each(function(){
     $(this).parent().parent().append( $(this).parent() );
});

this will move all .swatchimgouter divs,which have .swatchdisabled class on .swatchimginner div, to the end of their parent.

Demo is here.