jQuery를 인덱스가 여기에

Question

내 문제입니다 색인 y와 인덱스 X를 선택하기 위해, 나는 DIV의 무리가 있습니다

<div id="maincontent"> 
    <div class="imgPrev">...</div> 
    <div class="imgPrev">...</div> 

    [...] 
</div> 

나는 다음 교대 (e.shiftKey)를 누르면하는 imgPrev의 DIV을 클릭합니다을 클릭 다른 imgPrev의 DIV에 포함 사이의 모든 사업부를 만들기 위해 사람들이 그들이 선택처럼 (반투명.

내가 인덱스를 얻기 위해 노력하지만 항상 얻을 -1 인덱스로. 나는 이미를 읽혀질 수

.index에 대한 jQuery 문서. 여전히 작동하지 않습니다.

누구나 어떻게 작동하는지 알고 계십니까?

편집 :

<div id="maincontent"> 

<div class="imgPrev"><input type="checkbox" name="red-box" value="1" /> 
    <img src="./photos/unsorted/1.jpg" height="120" class="imgshadow" id="11" photoId="20" iW="1920" iH="1200" name="1.jpg" size="467972"/> 
    1.jpg 
</div> 
<div class="imgPrev"> 
    <input type="checkbox" name="red-box" value="1" /><img src="./photos/unsorted/4.jpg" height="120" class="imgshadow" id="12" photoId="21" iW="1920" iH="1200" name="4.jpg" size="547799"/> 
    4.jpg 
</div> 
<div class="imgPrev"> 
    <input type="checkbox" name="red-box" value="1" /><img src="./photos/unsorted/3.jpg" height="120" class="imgshadow" id="13" photoId="22" iW="1920" iH="1200" name="3.jpg" size="517538"/> 
    3.jpg 
</div> 
<div class="imgPrev"> 
    <input type="checkbox" name="red-box" value="1" /><img src="./photos/unsorted/2.jpg" height="120" class="imgshadow" id="14" photoId="23" iW="1920" iH="1200" name="2.jpg" size="529322"/> 
    2.jpg 
</div> 

</div> 

jQuery를 아래

전체 코드 : 죄송 대부분의 의견은 프랑스어

이 작동하는 것 같군

/* 
* 
*/ 
window.initialClick = undefined; 
/* 
* COUNTER - #/Size of selected photos - Displayed in the left bar 
*/ 
var globalSelectedPhotos = 0; 
var globalSelectedPhotosSize = 0; 
function globalSelectedPhotosUpdate() { 
    $('.globalSelectedPhotos').text(globalSelectedPhotos); 
    globalSelectedPhotosSize_mb = (globalSelectedPhotosSize/1024/1024).toFixed(2); 
    $('.globalSelectedPhotosSize').text(globalSelectedPhotosSize_mb); 
} 



function photoChecked(x) { 
    $(x).prev('input[type="checkbox"]').prop('checked', true).attr('checked','checked'); 
    $(x).addClass('checked'); 
    $(x).animate({opacity: 0.6, queue: 0}, 500); 
    globalSelectedPhotos ++; 
    globalSelectedPhotosSize += Number($(x).attr('size')); 
    globalSelectedPhotosUpdate(); 
} 
function photoUnchecked(x) { 
    $(x).prev('input[type="checkbox"]').prop('checked', false).removeAttr('checked'); 
    $(x).removeClass('checked'); 
    $(x).animate({opacity: 1, queue: 0}, 500); 
    globalSelectedPhotos --; 
    globalSelectedPhotosSize -= Number($(x).attr('size')); 
    globalSelectedPhotosUpdate(); 
} 
function photoUnselectAll() { 
    $('.imgshadow input[type="checkbox"]').prop('checked', false).removeAttr('checked'); 
    $('.imgshadow').removeClass('checked'); 
    $('.imgshadow').animate({opacity: 1, queue: 0}, 250); 
    globalSelectedPhotos = 0; 
    globalSelectedPhotosSize = 0; 
    globalSelectedPhotosUpdate(); 
} 

// Capture right click 
$(".imgshadow").live('mouseover', function(e) { 
        $(this).addClass("hover"); 
       }) 
       .live('mouseout', function(e) { 
        $(this).removeClass("hover"); 
       }) 
       .live('click', function(e) { 
        //Si CTRL est pressé - Sélection multiple 
        if (e.ctrlKey) { 
         e.preventDefault(); 
         //Si dé-sélectionné 
         if(!$(this).prev('input[type="checkbox"]').prop('checked')){ 
          photoChecked(this); //Sélectionne 
         //Si sélectionné 
         }else{ 
          photoUnchecked(this); //dé-sélectionne 
         } 

        } else if(e.shiftKey) { 
         e.preventDefault(); 

         photoChecked(this); 

         var currentNode = this; 
         var up = $(this).index() > $(window.initialClick).index(); 
         while (currentNode && currentNode != window.initialClick) { 
          photoChecked(currentNode); 
          currentNode = up ? currentNode.previousSibling : currentNode.nextSibling; 
         } 
         window.initialClick = undefined; 

        } else { 
         if(globalSelectedPhotos > 1) { 
          photoUnselectAll(); //Désélectionne tout 
         } 
         if(window.initialClick != this) { 
          //Place clique initiale ici 
          photoUnchecked(window.initialClick); 
          window.initialClick = this; 
          photoChecked(this); 

          var size = $(this).attr('size'); 
          //globalSelectedPhotos = 1; 
          globalSelectedPhotosSize = size; 
          globalSelectedPhotosUpdate(); 
         } 
        } 

        //Left bar - Preview panel 
        var src = $(this).attr('src'); 
        var name = $(this).attr('name'); 
        var size = $(this).attr('size'); 
        var dim = $(this).attr('iW')+'x'+$(this).attr('iH'); 
        $('#preview .img').html('') 
            .append('<img src="'+src+'" width="100%">'); 
        $('#preview #properties .prop_photoName').text(name); 
        $('#preview #properties .prop_photoDim').text(dim); 
        $('#preview #properties .prop_photoSize').text(size); 
       }); 

Answer 1

에 있습니다. 당신이 시도한 것에 대한 더 이상의 정보가 없다면, 이것은 당신이 올린 HTML로 작동하는 것처럼 보입니다.

$('.imgPrev').click(function() 
{ 
    alert($('div.imgPrev').index(this)); 
}); 

Answer 2

index() 메서드는 저에게 잘 작동하는 것 같습니다. 선택한 요소를 표시하려면 해당 요소와 nextSibling 및 previousSibling 속성의 간단한 조합을 사용하는 것이 좋습니다.

여기에 무슨 뜻인지의 예 : http://jsfiddle.net/dgbVV/