如何在javascript中检查包装器中有多少div作为行结算？

消息来源在这里

我有一个函数

SetGridBorder

，它采用类似

1px纯红

的边框样式和类似

box wrapper

的包装选择器

在我的示例代码中，4行位于一行中，因此它们是4列和4行。如何在JavaScript中确定它。我想在这个规则中设置边界

第一行中的2和3缺少左边框和右边框（因此这不是重复边框）

第二列和第三列（中间行）缺少顶部和底部边框，因此此处也没有重复的边框

我如何用JavaScript实现它？有人对如何做得更好有建议吗

$(document).ready(function () {   
    var box_wrapper = $(".box-box-wrapper", ".box");   
    SetGridBorder(4,4)
});

function SetGridBorder(style,selector) {

}​

---

通过将包装宽度和高度除以框的宽度和高度，可以得到行数和列数。在您的示例中，包装高度为零，因此我添加了

overflow:auto到
body.box包装器
类。更新小提琴

仅供参考

function getRows() {
    var wrapperWidth = $(".box-wrapper").width();
    var boxWidth = $(".box-wrapper > div").width();
    return Math.floor(wrapperWidth / boxWidth);
}

function getColumns() {
    var wrapperHeight = $(".box-wrapper").height();
    var boxHeight = $(".box-wrapper > div").height();
    return Math.floor(wrapperHeight / boxHeight);
}

 body .box {
  width: 128px;
  height: 128px;
  float: left;
  text-align: center;
    border:solid 1px #555;
}
$(document).ready(function () {
    $.each($(".box"),function(i,n){
        if((i+1)%4!=0){
            $(n).css({'border-right':'none'})        
        }
        if((i+1)>4){
           $(n).css({'border-top':'none'})        
        }
    });
});