如何計算同類型元素的寬度，直到一些元素

Question

HTML：

<li class="home"><a href="/"><img alt="home" src="img/gohome.png"/></a></li> 
<li class="portfolio closed" ><a href="portfolio"><span>portfolio</span></a></li> 
<li class="articles opened" style="margin-right: 849px;"><a href="articles"><span>articles</span></a></li> 
<li class="contact"><a href="contact"><span>contact</span></a></li> 

JS：

$('nav li').each(function(index) { //Navigation total width 
     navWidth += $(this).width(); 
    }); 

我有劇本一樣，它的工作原理，但我也有算李元素的寬度直到一些基於類的特定元素爲ex。投資組合。我不知道如何去做。

Answer 1

一種方法可以退出循環，當你遇到一個元素與類：

$('nav li').each(function() { 
    if ($(this).hasClass('portfolio')) { 
     return false; 
    } 
    navWidth += $(this).width(); 
}); 

另一種方法是隻選擇直到portfolio類元素的所有元素。這可以通過讓說元素的索引來完成和選擇所有元素，直到該索引：

var $lis = $('nav li'); 

$lis.slice(0, $lis.filter('.portfolio').index()).each(function() { 
    // ... 
}); 

這是假設所有這些li元素互爲兄弟姐妹之下。

參考：.each，.filter，.slice

Answer 2

另一種選擇與nextUntil()：

$("nav li:first").nextUntil(".portfolio").andSelf().each(function(index) { 
    navWidth += $(this).width(); 
});