5

合計 16 個の画像を持つ 4 つの画像コンテナーを新しいペインに配置しようとしています。以下のjQueryは、私がそれを行うために思いついたものです。最初のペインは、4 つの画像で正しく表示されます。しかし、2 番目には 4 つの画像と 3 番目のペインがあります。3 番目のペインには 4 つの画像と 4 番目のペインがあります。なぜネスティングが発生しているのか正確にはわかりません。私のラッピングによってインデックスが変更されることはありません。それらに css ボーダーを追加したところ、正しくインデックスが作成されたようです。これについてどうすればいいですか？私が望むのは、あるペインに 1 ～ 4、別のペインに 5 ～ 8、9 ～ 12、および 13 ～ 16 を表示することです。各ペインの数値を変更できるように動的である必要があるため、HTML でそれを行うことはできません。

この問題のデモは、http: //beta.whipplehill.com/mygal/rotate.htmlで見ることができます。DOM を表示するために firebug を使用しています。

どんな助けでも素晴らしいでしょう！

jQuery コード

$(function() { 
    $(".digi_image:gt(-1):lt(4)").wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid red");
    $(".digi_image:gt(3):lt(8)").wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid blue");
    $(".digi_image:gt(7):lt(12)").wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid green");
    $(".digi_image:gt(11):lt(16)").wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid orange");
    $(".digi_pane").append("<div style=\"clear: both;\"></div>");
});

HTML (省略形) ですが、基本的には 16 回繰り返されます。

<div class="digi_image">
    <div class="space_holder"><img src="images/n883470064_4126667_9320.jpg" width="100" /></div>
</div>
4

2 に答える 2

5

あなたの問題は、 gt() および lt() セレクターの使用だと思います。代わりに、slice() を調べる必要があります。

この投稿をチェックしてください: http://docs.jquery.com/Traversing/slice

于 2008-09-30T15:30:29.367 に答える
1

興味のある方のために… これは私がやったことです。

$(".digi_image").slice(0, 4).wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid red");
$(".digi_image").slice(4, 8).wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid blue");
$(".digi_image").slice(8, 12).wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid green");
$(".digi_image").slice(12, 16).wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid orange");
$(".digi_pane").append("<div style=\"clear: both;\"></div>");

そして、それは私が必要とする方法で正確に機能します。おそらくもう少し効率的にすることができますが、うまくいきます。

于 2008-09-30T15:41:08.903 に答える