jQuery：根据变量计数多次运行函数

Question

我在网格中使用浮动div，并且我想填写最后一行，因此它始终有= number。该函数应该适用于每行中的任意数量的项目（因为这可能会有所不同）。 我得到了工作接受它只生成一个填充，而不是两个（如下例所示）！

HTML：

<ul> 
<!-- first row --> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<!-- second row --> 
<li>Item 4</li> 
<li>Item 5</li> 
<li>Item 6</li> 
<!-- third row --> 
<li>Item 7</li> 
</ul> 

CSS：

li.gallery-item { width: 33.3334%; float: left;} 

JS：

function rowFillers() { 
     var $galItem = jQuery('.gallery-item'), 
      $rowFiller = jQuery('<div class="row-filler">TEST</div>') 
      $lisInRow = 0; 

     //Calculate number of gallery-items on each row 
     $galItem.each(function() { 
      $this = jQuery(this); 
      if($this.prev().length > 0) { 
       if($this.position().top != $this.prev().position().top) return false; 
       $lisInRow++; 
      } else { 
       $lisInRow++; 
      } 

     }); 

     //Calculate number in last row 
     var $lisInLastRow = $galItem.length % $lisInRow; 
     if($lisInLastRow == 0) $lisInLastRow = $lisInRow; 

     //If last row isn't full, add fillers 
     if ($lisInLastRow != $lisInRow) { 

      function addRowFiller() { 
        $galItem.last().after($rowFiller); 
      } 


      $fillerI = $lisInRow - $lisInLastRow; 

      for (var i = 0; i < $fillerI; i++) { 
          addRowFiller(); 
      } 
     } 
    } 

    rowFillers(); 

这里有一个小提琴：https://jsfiddle.net/m8xcpdys/1/

Answer 1

我想出了

function rowFillers() { 
    var $galItem = jQuery('.gallery-item'), 
     $rowFiller = jQuery('<div class="gallery-item">TEST</div>') 
     $lisInRow = 0; 
     var $items = $(".gallery-item"); 
     var addc = 3 -($items.length %3); 

     for(var i = 0; i < addc; ++i){ 

      $items.parent().append($rowFiller.clone()) 
     } 
    } 

，并添加类

div.gallery-item { width: 33.3334%; float: left;}