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

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

我不确定我是否解释得足够好，但小提琴应该会清楚我想要什么。 前五个div的宽度发生了一些变化，以确保行已填充，但我无法使其余的行填充容器

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

到目前为止，我有一个函数，从这里修改：：

---

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

以下是我认为您正在努力实现的目标的简化版本：

var lisInRow = 0;
$('div div').each(function() {
  if($(this).prev().length > 0) {
    if($(this).position().top != $(this).prev().position().top){
      lisInRow++;
    }                   
   $(this).addClass("row" + lisInRow);  
 }
});

---

Fiddle:

如果我理解您的意图，我会对代码做一些小改动

                    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);
                    }); 
}

var lisInRow=0；
var lisInRow2=0；
var行=0；
$（'div-div'）。每个（函数（）{
如果（$（this.prev（）.length>0）{
if（$（this.position（）.top！=$（this.prev（）.position（）.top）行++；
lisInRow++；
$（this）.addClass（“行”+行）；
//console.log（$（this.prev（）.length）
}
否则{
lisInRow++；
$（this.addClass（“row0”）；
}
});
对于（var i=0；我不确定我是否真的理解。为什么不使用一个表呢？因为我使用同位素来构建布局，而表不能很好地修复它！现在我必须离开每一行并对每一行进行计算，有些事情仍然不起作用。。现在我已经填充了最后一行：niiice！！！现在我所要做的就是让它与同位素一起工作。我会接受你的a吗如果我不能回答，我会再发一个问题。谢谢！
                    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);
                    }); 
}