jQuery的绝对定位依赖于.each()循环中的最后一个元素

Question

我目前正试图使1-4列响应网格布局(取决于屏幕大小)。我使用绝对定位而不是浮动，因为其中一些元素比其他元素高。我猜你可以说这有点像pinterest，但是列的宽度不是固定的，每个框的比例是3.5:2或3.5:4，这意味着每个框的高度可能不同。

我已经得到了尽可能多的列布局和盒子大小正确工作，我的下一个问题，我似乎无法弄清楚的是能够定位每个盒子下的最后一个。

我有几个循环，这里是我需要做工作的一个。

for(i=0; i<= col; i++){
    $('.card:nth-child(' + col + 'n+' + i + ')').each(function(col){ 
        $(this).css({left: (cardW + cardM)*(i-1) + "px"}).html(i);
    });
}

因此，它的作用是，根据列的数量，找到每个nth-child并将它们与left水平放置。

这工作得很好。问题是，所有的元素(是position:absolute;)都粘在屏幕的顶部。

现在，我需要遍历中的每个特定元素，然后将元素的高度添加到之前。

我试过索引每个元素，我不想添加类到任何东西。您可以在这里看到一个示例，但当前没有任何工作。

我在代码中添加了这个:

var index = $(this).length;
console.log(index);

每次都得到1，而不是5

当我在每个循环中索引所有元素时，我只得到1作为索引号，我不知道如何找到最后一个元素的高度。

如果不明白，请评论。

我已经算出来了，并做了计算。由于学习了如何使用下面答案中的索引号，这里是对代码的补充。

for(i=0; i<= col; i++){
    var nthCard = $('.card:nth-child(' + col + 'n+' + i + ')')
    nthCard.each(function(idx){
        nthCard.css({left: (cardW + cardM)*(i-1) + "px"});  
        if(idx > 0){
            var prevC = nthCard.eq(idx-1);
            var prevT = parseInt(prevC.css("top").replace("px", ""));
            var prevH = parseInt(prevC.css("height").replace("px", ""));
            var prevM = parseInt(prevC.css("margin-top").replace("px", ""));
            console.log(prevT + " " + prevH + " " + prevM + " = " + (prevT + prevH + prevM));
            nthCard.eq(idx).css({top: (prevT + prevH + prevM) + "px"});
        }
    }); 
}

Answer 1

试试这个:-

使用$.each的函数参数，第一个是索引，第二个是元素本身(或this)。

    for(i=0; i<= col; i++){
    $('.card:nth-child(' + col + 'n+' + i + ')').each(function(idx){
        //... SOme code
                    console.log(idx)
                    //..somecode
    }); 
}