jQuery इंडेक्स चयनकर्ता

Question

मैं अपने छवि कंटेनरों में से 4 को एक नए फलक में रखने की कोशिश कर रहा हूं, जिसमें कुल 16 छवियां हैं। नीचे दिया गया jQuery वह है जो मैं इसे करने के लिए आया था। पहला फलक इसमें 4 छवियों के साथ सही ढंग से बाहर आता है। लेकिन दूसरे में 4 छवियां हैं, साथ ही तीसरा फलक भी है। और तीसरे फलक में 4 छवियां और 4 वें फलक हैं। मुझे नहीं पता कि घोंसला क्यों हो रहा है। मेरा रैपिंग उनके सूचकांक को बदलने के कारण नहीं हो सकता है। मैंने उन्हें सीएसएस सीमाएं जोड़ दीं और ऐसा लगता है कि यह सही ढंग से अनुक्रमित है। मुझे इसके बारे में कैसे जाना चाहिए? मैं चाहता हूं कि एक फलक में 1-4, दूसरे में 5-8, 9-12, और 13-16 हो। इसे गतिशील होने की आवश्यकता है ताकि मैं प्रत्येक फलक में संख्या बदल सकूं, इसलिए इसे HTML में कराना एक विकल्प नहीं है।

इस मुद्दे का एक डेमो यहां देखा जा सकता है: http://beta.whipplehill.com/mygal/rotate.html। मैं डोम देखने के लिए फायरबग का उपयोग कर रहा हूँ।

कोई मदद अलग-अलग होगी!

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>"); 
}); 

एचटीएमएल (संक्षिप्त), लेकिन अनिवार्य रूप से 16 बार दोहराया।

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

Answer 1

मुझे लगता है कि तुम्हारी समस्या जीटी() और लेफ्टिनेंट() चयनकर्ताओं के आपके उपयोग है। आपको इसके बजाय टुकड़ा() देखना चाहिए। इस पोस्ट के बाहर

की जांच: http://docs.jquery.com/Traversing/slice

Answer 2

जो लोग उत्सुक हैं के लिए ... यह मैं क्या किया है।

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

और यह ठीक से काम करता है कि मुझे इसकी आवश्यकता है। शायद थोड़ा और अधिक कुशल बनाया जा सकता है, लेकिन यह काम करता है।