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ピクセル×30ピクセルです。

これはUIに関する考慮事項にすぎません。無効になっているすべての画像を最後に配置することで、無効になっているアイテムと有効になっているアイテムを追跡しやすくなります。

これを行うのがかなり簡単な場合は、内部のdivクラスも一緒に保持する必要があります。

4

3 に答える 3

3

このようにしてみてください：

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

これにより、divにクラスが.swatchimgouterあるすべてのdivが親の末尾に移動します。.swatchdisabled.swatchimginner

デモはこちらです。

于 2012-07-03T12:52:54.633 に答える
2 
$('.swatchdisabled').each(function() {
     $(this).closest('.swatchimgouter').appendTo($('#parentdiv'));
});

また

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

すべてのラッピングdivの共通の親はどこ#parentidですか

于 2012-07-03T12:51:06.717 に答える
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 に答える