javascript - jQuery 在当前行的 div 上添加行号作为类

Question

我需要让 jquery 填充布局中的所有行作为 fiddle 中的第一行

不确定我是否解释得足够好，但 fiddle 应该清楚我想要什么。前五个 div 的宽度有所改变，以确保该行已填满，但我无法让其余行填满容器

基本上我想通过增加宽度来证明所有 div 的合理性

http://jsfiddle.net/SG9Vx/

到目前为止我有这个功能，从这里修改:jQuery Find number of items per row in floated li's :

var lisInRow = 0;

$('#posts div').each(function() {
if($(this).prev().length > 0) {
    if($(this).position().top != $(this).prev().position().top) return false;
    lisInRow++;
    $(this).addClass("row1");   
}
else {
       lisInRow++;  
       $(this).addClass("row1");    
   }
});

var itemNumber = $(".row1").length
var widthRow = 0;
$('.row1').each(function() {
    widthRow += $(this).outerWidth( true );
});
var widthContainer = $("#posts").width();
var remaining = widthContainer - widthRow;
leftMargin = Math.floor(remaining / itemNumber);
$(".row1").each(function(){ 
    var addedwidth = $(this).width() + leftMargin;
    $(this).width(addedwidth);
}); 

我对第一行所做的是计算容器的剩余部分，将其除以行中的元素数，然后将结果添加到行中每个元素的宽度。

Answer 1

如果我明白你想做什么，我对代码做了一些小改动

                    var lisInRow = 0;
                    var lisInRow2 = 0;
                    var row =  0;
                    $('div div').each(function() {
                        if($(this).prev().length > 0) {
                            if($(this).position().top != $(this).prev().position().top) row++;
                            lisInRow++;
                            $(this).addClass("row"+row);    
                            //console.log($(this).prev().length)
                        }
                        else {
                            lisInRow++;  
                            $(this).addClass("row0");   
                        }
                    });
for(var i=0;i<=row;i++){
                    var itemNumber = $(".row"+i).length
                    console.log(row);
                    var widthRow = 0;
                    $(".row"+i).each(function() {
                        widthRow += $(this).outerWidth( true );
                    });
                    var widthContainer = $("#posts").width();
                    var remaining = widthContainer - widthRow;
                    leftMargin = Math.floor(remaining / itemNumber);
                    $(".row"+i).each(function(){ 
                        var addedwidth = $(this).width() + leftMargin;
                        $(this).width(addedwidth);
                        $(this).find("img").width(addedwidth);
                    }); 
}

给你:

http://jsfiddle.net/SG9Vx/3/