TwitterBootstrapのレスポンシブグリッドに基づいて関数を作成しています。.row-fluid
コンテナとして、およびspans
行内に収まるノードとして使用します。各行には、最大12個の「スパン」を含めることができます。
.row-fluid
関数でクラスを持つ要素を検索し、その子ノードを検索し、クラス名を取得し、クラス名から「スパン」を削除して(数値のみを残して)、それらの数値を合計したいと思います。結果が12より大きい場合は、最大数を12に等しくなるまで縮小します。
複雑に聞こえますが、うまくいけば、私はそれほど遠くないです。これが私が今のところいるところです:
$('.row-fluid').each(function() {
var spanned = $(this).children('div[class*=span]').each(function() {
var total = 0, nums = $(this).attr('class').match(/\d+/);
nums.each(function() {
total += this;
}
console.log(total);
}
);
console.log("break");
}
);
現在、これは数字だけでなく全体の要素をログに記録しているので、どこが間違っているのか/ここから何をすべきかについて少し迷っています。何かアドバイス?
編集:構造はこれに似ています:
<div class="row-fluid">
<div class="span5">
</div>
<div class="span4">
</div>
<div class="span2">
</div> //Function should check if the 3 above spans <= 12
<div class="row-fluid">
<div class="span8"> //Function should see this and...
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div> //...this and see that they DON'T equal 12, then subtract 2 from the bigger span so that they DO equal 12
</div>
</div>
</div>