jQueryを使って、動的に変化するli要素の数に応じて均等割り付け

サイトマップ

営業日カレンダー

お問い合わせ

決められた幅の中に動的に数が変化するli要素などがある場合、その数に応じて均等割り付けするスクリプトです。

サンプル（１）は、横方向のmargin、paddingを使わず、borderもないので、均等割り付けする要素の数で100%を割って、幅を%で算出しています。

サンプル（２）は、横方向の右marginで1px、1pxのborderが左右で2px、計3px余計に幅を取るため、均等割り付けする要素の数で94%を割って、幅を%で算出しています。そのため、均等割り付け可能なli要素の数は15個までになります。

サンプル（１）ソース

$(function() {
    $('.divide').each(function(){
     var wid = $(this).find('li').length;
     $(this).children('.divide>li').css("width",100/wid+"%");   
    });
});

サンプル（１）

1
2
3
4
5

1
2
3

1
2
3
4
5
6
7
8
9
10
11

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

　

サンプル（２）ソース

$(function() {
    $('.divide2').each(function(){
     var wid2 = $(this).find('li').length;
     $(this).children('.divide2>li').css("width",94/wid2+"%");   
    });
});

サンプル（２）

1
2
3
4
5

1
2
3

1
2
3
4
5
6
7
8
9
10
11

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

　

　

　

　

　

　

※参照元：http://jsdo.it/toshino/9t5v