获取（计算）具有动态宽度的多个元素的总宽度

所以我有一个李的列表包裹在ul。

<ul class="ulclass"> 
    <li class="liclass"> 
     <div class="button">expand</div> 
     <img src="600px_wide.jpg"/> 
    </li> 
    <li class="liclass"> 
     <div class="button">expand</div> 
     <img src="800px_wide.jpg"/> 
    </li> 
    <li class="liclass"> 
     <div class="button">expand</div> 
     <img src="300px_wide.jpg"/> 
    </li> 
</ul>

每个利元件内

有一个按钮，点击李时将扩大到嵌套图像的宽度。因此，如果图像宽度为800px，则li将相应地展开。

现在情况是我想要动态计算所有li的总宽度。现在我使用的是这样的：

$(li).each(function() { 
totalWidth += parseInt($(this).width()); 
});

这将让所有的李的宽度是在页面加载。但扩大后说一里宽度值不变。 我想要扩展/收缩李的一个事件监听器可能会改变总宽度？在回调等方面，我真的很新颖。所以我希望至少有一些指导。也许这是不可能的...

我感谢所有帮助！谢谢

来源

2012-01-15 Sebastian Graz

您可以简单地调用这个代码，每次扩展或收缩li时计算宽度。除非你有大量的li元素，否则将它们全部加回去的表现应该不会太差。

来源

2012-01-16 00:02:35

我会有约10-20里不知道它是否被认为是很多表现。另外我想尽可能保持代码的清洁。 – 2012-01-16 17:43:02

詹姆斯的答案很好，但取决于读取值的频率/数量，您可能更喜欢在需要值时调用该代码。因此，而不是someDependentFunction(totalWidth)，你会someDependentFunction(totalWidth())，其中totalWidth是：

function totalWidth = new function() { 
    var total = 0; 
    $(li).each(function() { 
     total += parseInt($(this).width()); 
    }); 
    return total; 
}

正如詹姆斯所说，如果你担心调用$（LI）的性能，那么如果它像YUI相当于什么会首次调用后缓存结果，所以它真的不应该太多。尽管如此，我并不是一个真正的jQuery专业人士，所以可能并非如此。

来源

2012-01-16 01:03:19 Jeff

获取（计算）具有动态宽度的多个元素的总宽度

回答

相关问题