javascript - 如何计算相同类型元素的宽度直到某个元素

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

我有类似的脚本，但我还必须计算 Li 元素的宽度，直到某些基于类的特定元素。文件夹。而且我不知道该怎么做。

Answer 1

另一个选项nextUntil()：

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

Answer 2

一种方法是在遇到具有该类的元素时退出循环：

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

另一种方法是只选择所有元素，直到具有 class 的元素portfolio。这可以通过获取所述元素的索引并选择直到该索引的所有元素来完成：

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

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

这是假设所有这些li元素都是彼此的兄弟姐妹。

参考： .each , .filter,.slice