jQuery index to select index x to index y

Here is my problem, I have a bunch of div :

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

    [...]
</div>

I want to click on a imgPrev div, then press shift (e.shiftKey) and click on another imgPrev div to make all div in between including those 2 semi-transparent (like they are selected.

I tried to get the index but I always get -1 as an index.

I already readed the jQuery documentation about .index but still not working.

Anyone know how this works?

EDIT

Complete code below :)

<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 : Sorry most comments are in french

/*
 *  
 */
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).i开发者_C百科ndex();
                        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);
                });

The index() method seems to work fine for me. I recommend using a simple combination of that and the nextSibling and previousSibling properties to mark your selected elements.

Here's an example of what I mean: http://jsfiddle.net/dgbVV/

This seems to be working. Without more information on what you've tried and so on, this seems to work with the HTML you posted.

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