0

ソースはこちらhttp://jsfiddle.net/4fV3k/

SetGridBorderボーダーのようなスタイルと1px solid redラッパーのセレクターのような関数がありますbox-wrapper。

私の例のコードとして、4行が1行に存在するため、4列と4行になります。JavaScriptでそれを判断する方法。このルールで境界線を設定したいと思います。

  1. 最初の行の2と3には、左右の境界線がありません（したがって、これは重複した境界線ではありません）。

  2. 2列目と3列目（中央の行）には上下の境界線がないため、ここでも重複する境界線はありません。

JavaScriptでそれを行うにはどうすればよいですか？誰かがそれをより良くする方法についての提案がありますか？

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

function SetGridBorder(style,selector) {

}​
4

2 に答える 2

0

ご参考までに。

 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-05T09:54:57.723 に答える
0

ラッパーの幅と高さをボックスの幅と高さで割ることで、行と列の数を取得できます。あなたの例ではラッパーの高さがゼロだったので、クラスに追加overflow:auto;しました。http://jsfiddle.net/4fV3k/7/body .box-wrapperで更新されたフィドル

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-05T09:53:18.437 に答える