1

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

<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 像素 x 30 像素。

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

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

4

3 回答 3

3

试试这样：

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

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

演示在这里。

于 2012-07-03T12:52:54.633 回答
2

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

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

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

于 2012-07-03T13:14:12.970 回答
2 
$('.swatchdisabled').each(function() {
     $(this).closest('.swatchimgouter').appendTo($('#parentdiv'));
});

或者

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

#parentid所有包装 div 的共同父级在哪里

于 2012-07-03T12:51:06.717 回答