javascript - 可以根据父 div 的类对渲染图像进行排序吗？

Question

我有一些像这样包装在容器中的图像:

<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>

这不是关键任务，但我开始考虑使用 JQuery 可能相当容易地对这些图像进行排序。我想将所有包装在“swatchdisabled”类中的图像放在最后。

可能有几十张这样的图片。它们都采用 float:left 样式，因此它们水平显示在行中。即使有几十个，也只有两行。这些图像中的每一个都是 30 x 30 像素。

这只是一个 UI 考虑因素。通过将所有禁用的图像放在末尾，可以更轻松地跟踪哪些项目被禁用和哪些被启用。

如果这样做相当简单，我还需要保留它们的内部 div 类。

Answer 1

像这样尝试:

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

这会将所有在 .swatchimginner div 上具有 .swatchdisabled 类的 .swatchimgouter div 移动到其父级的末尾。

演示是 here .