jQuery 인덱스 선택자

Question

이미지 컨테이너 4 개를 새 창에 배치하려고합니다. 총 16 개의 이미지가 있습니다. 아래의 jQuery는 내가 그것을하기 위해 내놓은 것입니다. 첫 번째 창에는 4 개의 이미지가 올바르게 표시됩니다. 그러나 두 번째 이미지에는 4 개의 이미지와 세 번째 창이 있습니다. 세 번째 창에는 네 개의 이미지와 네 번째 창이 있습니다. 나는 중첩이 일어나고있는 이유를 정확하게 모른다. 내 랩핑으로 인해 색인이 변경 될 수 없습니다. 나는 그들에게 CSS 테두리를 추가하고 그것은 정확하게 색인이 생성 된 것으로 보인다. 이 일에 대해 어떻게해야합니까? 내가 원한 것은 한 칸에 1-4, 5-8, 5-8, 9-12, 13-16입니다. 각 창에서 번호를 변경할 수 있도록 동적이어야하므로 HTML로만 수행하는 것은 옵션이 아닙니다.

문제의 데모는 여기 http://beta.whipplehill.com/mygal/rotate.html에서 볼 수 있습니다. 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

...이 내가 한 것입니다.

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

그리고 내가 필요로하는 방식으로 정확하게 작동합니다. 아마 조금 더 효율적으로 만들 수 있지만 작동합니다.