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元素的宽度，直到某些基于类的特定元素为ex。投资组合。我不知道该怎么做。

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

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

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

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

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

参考： .each，.filter，.slice

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

2 个答案: