javascript - 如何在javascript中检查有多少div在包装器中作为行解决？

Question

来源在这里http://jsfiddle.net/4fV3k/

我有一个函数SetGridBorder，它采用类似边框的样式和类似1px solid red包装器的选择器box-wrapper。

由于我的示例代码 4 行是连续的，所以它们是 4 列和 4 行。我如何在 JavaScript 中确定它。我想在这个规则中设置边界。

1. 第一行的 2 和 3 缺少左右边框（所以这不是重复的边框）。

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

我如何在 JavaScript 中做到这一点？有人对如何做得更好有建议吗？

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

function SetGridBorder(style,selector) {

}​

Answer 1

您可以通过将包装器宽度和高度除以框的宽度和高度来获得多少行和列。在您的示例包装器高度为零，所以我添加overflow:auto;到body .box-wrapper类。在http://jsfiddle.net/4fV3k/7/更新小提琴

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

Answer 2

供参考。

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