jQuery索引选择索引x到索引y

Question

这是我的问题，我有一堆 div ：

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

    [...]
</div>

我想单击一个 imgPrev div，然后按 Shift (e.shiftKey) 并单击另一个 imgPrev div 以使中间的所有 div 包括这 2 个半透明（就像它们一样） 我尝试获取索引

，但总是得到 -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

index() 方法似乎对我来说工作得很好。我建议使用该属性与 nextSibling 和 previousSibling 属性的简单组合来标记所选元素。

这是我的意思的一个例子： http://jsfiddle.net/dgbVV/

Answer 2

这似乎有效。如果没有有关您尝试过的内容等的更多信息，这似乎适用于您发布的 HTML。

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