jQuery Bootstrap替換表格行div並添加基於數字的推拉類

Question

我想弄清楚如何添加一個類到行中的列基於列從引導網格使用的類。我有點工作，但必須在jQuery中手動指定列推和拉類。

我的HTML引導列看起來像這樣。

<div class="alt-col-grid"> 
<div class="row"> 
    <div class="col-sm-4"> <a href="#"><img src="http://placehold.it/400x200" /></a> </div> 
    <div class="col-sm-8"> 
    <h3><a href="#">Feature Column</a></h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper convallis consectetur. Nunc pharetra ligula quis mauris aliquam convallis.</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-4"> <a href="#"><img src="http://placehold.it/400x200" /></a> </div> 
    <div class="col-sm-8"> 
    <h3><a href="#">Feature Column</a></h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper convallis consectetur. Nunc pharetra ligula quis mauris aliquam convallis.</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-4"> <a href="#"><img src="http://placehold.it/400x200" /></a> </div> 
    <div class="col-sm-8"> 
    <h3><a href="#">Feature Column</a></h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper convallis consectetur. Nunc pharetra ligula quis mauris aliquam convallis.</p> 
    </div> 
</div> 
</div> 

我的jQuery看起來像這樣

$(function() { 
    $('.alt-col-grid div.row:odd .col-sm-4').addClass('col-sm-push-8'); 
    $('.alt-col-grid div.row:odd .col-sm-8').addClass('col-sm-pull-4'); 
}); 

它的工作原理，但我如何使它所以如果我不知道列類數COL-SM-4和查找COL-SM-和然後根據數字添加推拉。所以這個列將會是4，所以它會爲col-sm-pull-4添加類，並將列中剩下的12個添加到另一列，並添加col-sm-push-8。它會根據列div類的類來計算要添加到推拉類中的數字。

http://jsfiddle.net/abennington/rxpx1yts/11/

提前感謝！

Answer 1

如果我理解正確，這可以幫助你。 遍歷奇數行和獲取類的名字是這樣的：

$('.alt-col-grid div.row:odd').each(function() { 
}); 

而另一回路列。

$('.alt-col-grid div.row:odd').each(function() { 
    row = $(this); 
    row.children().each(function() { 
    }); 
}); 

您可以通過獲取類attr和刪除字母來獲取數字。

clmnsize = parseInt($(this).attr('Class').replace(/[^0-9\.]/g, ''), 10); 

這會給你4 8 8 4

而且，由於引導有12列，你可以減去數量從12找出剩下。 現在這是我不確定它是否會幫助你的部分。基本上，如果你只使用2列，第一個是轉推，第二個拉。（如果你有一個不同的場景這是不是要去工作）

clmn = $(this); 
var clmnsize = parseInt($(this).attr('Class').replace(/[^0-9\.]/g, ''), 10); 
newclasssize = 12 - clmnsize; 
var extraclassdecider = index % 2 == 0 ? 'push' : 'pull'; 
var newclass = 'col-sm-' + extraclassdecider + '-' + newclasssize; 
clmn.addClass(newclass); 

所以基本上，獲得新的號碼後我們檢查它的奇數列還是偶數列，並根據我們添加的推和拉。在下一行中，我們生成類和finalyl，我們將它添加到元素中。

以下是完整的fiddle。