jQueryインデックスセレクター

Question

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

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

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

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>

Answer 1

あなたの問題はgt（）とlt（）セレクターの使用だと思います。代わりに、slice（）を検索する必要があります。

この投稿をご覧ください： http://docs.jquery.com/Traversing/slice

Answer 2

好奇心are盛な人のために...これが私がやったことです。

$(".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>");

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