在循环条带的最后一行添加Class并响应

Question

我的每一行都有蓝色条带的列，所有条带都是从jquery基于多少行生成的。

问题是如果行只有1或2个框，如何将类添加到最后一个条带。 所以，如果

• 最后一行有1个框，然后将class='last'添加到条带
• 最后一行有2个框然后将class='half'添加到条带
• 最后一行有3个框不要添加class

我使用class=dna

创建条带

这是我的代码：

function patternbig(){
var $dna = $("<div class='dna'></div>");
var boxHeight = $('.box').height()+20;
var topPos = 60;
var bx = $('.boxWrap').height()/$('.box').height();
var n= $('.box').length / 3;
    for(var i = 0; i < n; i++){
        $dna.clone().css('top',topPos).appendTo('.entry');
        topPos += boxHeight;
    }
    $(".entry .dna").each(function(i) {
        $(this).addClass("pattern-" + (i+1));
    });
return false;
}
function patternsmall(){
var $dna = $("<div class='dna'></div>");
var boxHeight = $('.box').height()+20;
var topPos = 60;
var bx = $('.boxWrap').height()/$('.box').height();
var n= $('.box').length / 2;
    for(var i = 0; i < n; i++){
        $dna.clone().css('top',topPos).appendTo('.entry');
        topPos += boxHeight;
    }
    $(".entry .dna").each(function(i) {
        $(this).addClass("pattern-" + (i+1));
});
return false;
}
debounce = function(func, wait, immediate) {
var timeout, args, context, timestamp, result;
return function() {
  context = this;
  args = arguments;
  timestamp = new Date();
  var later = function() {
    var last = (new Date()) - timestamp;
    if (last < wait) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) result = func.apply(context, args);
    }
  };
  var callNow = immediate && !timeout;
  if (!timeout) {
    timeout = setTimeout(later, wait);
  }
  if (callNow) result = func.apply(context, args);
  return result;
};
  };
//add dna pattern 
$(window).load(function () {
$(window).resize(debounce(function(){
        if ($(window).width() > 980) {
                $('.dna').hide();
                patternbig();
                return false;
        }
        if ($(window).width() < 979) {
                $('.dna').hide();
                patternsmall();
                return false;
        };

},1)); 
$(window).resize();

}); 

这是jsfiddle link

如果最后一行只有2个框

，这应该是什么样子

---

我已解决此问题，如果有人遇到同样的问题，您可以在此处查看代码 - http://jsfiddle.net/v3v7C/10/

由于

Answer 1

修改了代码位：

 var n= $('.box').length / 3;

和css：

 @media(max-width:979px){.entrywrap{width:600px;} .box{ width:30%;}}
.dna:last-of-type{width: 66%;}

<强> Working Fiddle