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

来源是这里http://jsfiddle.net/4fV3k/如何在javascript中检查多少div在包装器中作为行解决？

我有一个功能SetGridBorder这需要像1px solid red边框的风格，像box-wrapper包装的选择。

正如我的示例代码4行是住在一行，所以他们是4列和4行。我如何在JavaScript中确定它。我想在此规则中设置边框。

第一行中的2和3缺少左侧和右侧边框（所以这不是重复边框）。
第二和第三列（middles行）缺少顶部和底部边框，所以在这里也没有重复的边框。

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

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

function SetGridBorder(style,selector) { 

}

来源

2012-12-05 user1814971

您可以通过将包装宽度和高度除以框宽和高来获得多少行和多列。在你的示例包装高度为零，所以我加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); 
}

来源

2012-12-05 09:53:18 arunes

仅供参考。

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

来源

2012-12-05 09:54:57

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

回答

相关问题