Question

我试图弄清楚如何根据列从bootstraps网格使用的类将行添加到一行中。我有点工作但必须在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。

然后，由于bootstrap有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。

jQuery Bootstrap交替表行div并根据数字添加推拉类

1 个答案: