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

你好，我将尽可能地成为一名教师

所以我有一份李的名单，用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>

这将获得页面加载中所有li的宽度。但是在扩展后，比如说一li，宽度值不会改变当我展开/收缩li的事件侦听器时，我希望总宽度发生变化？对于回调之类的事情，我真的是个新手。所以我至少需要一些指导。也许这根本不可能

---

我感谢所有的帮助！谢谢

您可以简单地调用此代码，它在每次展开或收缩

li时计算宽度。除非您有大量的
li
元素，否则只需重新添加它们的性能应该不会太差。
您只需调用此代码，即可计算每次展开或收缩
li
时的宽度。除非您有大量的
li
元素，否则只需重新添加它们的性能应该不会太差。
James的回答很好，但根据读取值的频率/位置，您可能更愿意在需要值时调用该代码。因此，您将使用
someDependentFunction（totalWidth（））
，而不是
someDependentFunction（totalWidth）
，其中
totalWidth
是：

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

正如James所说，如果您担心调用$（li）的性能，那么如果它与YUI等价，它将在第一次调用后缓存结果，因此它实际上应该不会太多。不过，我并不是一个真正的jQuery专业人士，所以情况可能并非如此。
James的回答很好，但根据读取值的频率/位置，您可能更愿意在需要值时调用该代码。因此，您将使用
someDependentFunction（totalWidth（））
，而不是
someDependentFunction（totalWidth）
，其中
totalWidth
是：

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

正如James所说，如果您担心调用$（li）的性能，那么如果它与YUI等价，它将在第一次调用后缓存结果，因此它实际上应该不会太多。不过，我并不是一个真正的jQuery专业人士，所以情况可能并非如此。
我会有大约10-20个li，但我不确定这是否会对性能造成很大影响。另外，我想保持代码尽可能干净。我将有大约10-20个li，不确定它是否被认为对性能有很大影响。我还想保持代码尽可能干净。