Javascript 在循环条带和响应条带的最后一行添加类

我在每一行上都有一个带蓝色条带的列，所有条带都是根据行数从jquery生成的

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

• 最后一行有1个框，然后将

  class='last'

  添加到条带中
• 最后一行有2个框，然后将

  class='half'

  添加到条带中
• 最后一行有3个框不添加

  类

我用

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

}); 

函数模式big（）{
变量$dna=$（“”）；
var-boxHeight=$（'.box'）.height（）+20；
var-topPos=60；
变量bx=$（'.boxWrap'）.height（）/$（'.box'）.height（）；
变量n=$（'.box'）。长度/3；
对于（变量i=0；i980）{
$（'.dna'）.hide（）；
模式大（）；
返回false；
}
如果（$（窗口）.width（）<979）{
$（'.dna'）.hide（）；
模式小（）；
返回false；
};
},1)); 
$（窗口）.resize（）；
}); 

这是

如果最后一行只有2个框，则应该是这样

---

我已经解决了这个问题，如果有人有同样的问题，你可以在这里检查代码-

谢谢修改了代码位：

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

和css：

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

---

您好，谢谢您。在您的JSFIDLE链接中，只有3列，如果我在调整浏览器大小时有2列，该怎么办？正如您在我的示例中看到的，当我们调整到979px以下时，列变为2。所有的框都是动态的，所以底线可能包含1、2或3个框。您可能需要在窗口大小调整和窗口加载时重新计算最后一行的宽度。您的意思是重新计算吗？.dna:last of type{width:66%；}嗨，Milind，我已经解决了这个问题-谢谢您的时间。很高兴您能分享这个解决方案。希望在将来帮助某人。