使用Javascript / jQuery将元素放在列中

Question

我使用Bootstrap在小屏幕上做4列网格，在大屏幕上做4列。

事情是我放置了网格<article>，但它们都没有相同的高度，这使得屏幕出现问题。 因为它们是由Laravel和foreach产生的，所以我不能手工放置它们。

所以我提出了这样的想法：给它们一个索引并在加载元素后将它们附加到我的网格中。 但实际上这根本不起作用;适用于两个第一个元素，然后它似乎不再得到索引。

以下是我通过这种方式完成的工作：

HTML

<div class="col-sm-6 col-md-3" id="A"></div>
<div class="col-sm-6 col-md-3" id="B"></div>
<div class="hidden-sm col-md-3" id="C"></div>
<div class="hidden-sm col-md-3" id="C"></div>

<?php $i=0 ?>
@foreach($object as $anything)
  <article id="index<?php echo($i++) ?>" >
    <title>{{$anything -> title}}</title>
    ...
    ...
  </article>
@endforeach

的jQuery

$('article').each(function(){
  var index = $(this).attr('id').match(/\d+/)[0];
  n=0;
  if(index == 1+2*n) $(this).appendTo('#A');
  if(index == 2+2*n) $(this).appendTo('#B');
  n++;
})

这是一个Fiddle

编辑（已解决）

最终设法使用此功能，如果这可以帮助某人一天。不过，我不知道两个函数之间的最大区别......

$('article').each(function(){
    var index = $(this).attr('id').match(/\d+/)[0];
    if(index %2 == 1) $(this).appendTo('#A');
    if(index %2 == 0) $(this).appendTo('#B');
});