jQuery引导替换表行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');
});

它可以工作，但我如何使它，所以如果我不知道列类编号class 4，并寻找class然后添加推和拉根据数字。所以这一列是4，因此它将为column pl-4和列中的其余12个类添加类到另一列，并添加column push-8。它将根据列divs类的类计算要添加到推拉类中的数字。

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() {
   });
});

您可以通过获取类攻击和删除字母来获得数字。

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

这会给你4 8 8 4。

然后，因为引导程序有12列，所以您可以从12中减去这个数字，找出剩下的部分。这是我不确定是否能帮到你的部分。基本上，如果你只使用两列，而第一列是推，第二列是拉。(如果你有不同的情况，它不会工作)

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，我们将它添加到元素中。

这是完整的小提琴。