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进行样式设置，因此它们在行中水平显示。即使有几十个，也只有2行。这些图像中的每一个都是30像素乘30像素。

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

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

Answer 1

试试这样：

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

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

演示是here。

Answer 2

$('.swatchdisabled').each(function() {
     $(this).closest('.swatchimgouter').appendTo($('#parentdiv'));
});

或

$('.swatchdisabled').each(function() {
     $(this).parent().appendTo($('#parentdiv'));
});

其中#parentid是所有包装div的共同父级

Answer 3

不依赖于您在评论中提到的容器div的版本，它只会与您问题中的给定div一起使用：

$(".swatchimgouter").last().after("<div id='wall'></div>")
$(".swatchdisabled").each(function(){
    $("#wall").after($(this).parent());
});
$("#wall").remove();

你可以挤出更多的果汁，但你明白了。

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

3 个答案: