如何计算悬停时所有先前的'li'元素宽度？

Question

我有列表，我正在尝试编写jQuery代码来计算之前的li宽度，而不是将鼠标悬停在某个元素上。例如，如果我悬停第三个元素，我需要获得第一个+第二个元素宽度。

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>

目前的代码：

jQuery('ul li').each(function() {
    jQuery(this).hover(function () {
        jQuery(this).prevAll().width();
    });
});

但我只获得一个前一个元素宽度。有人可以帮忙吗？

Answer 1

如果你想要宽度总和：

jQuery('ul li').each(function() {
    jQuery(this).hover(function () {
        var prevWidth = 0
        jQuery(this).prevAll().each(function(){prevWidth  += $(this).width();});
        alert(prevWidth );
    });
});

Answer 2

jQuery('ul li').on('mouseenter', function () {
    var width = 0;
    jQuery(this).prevAll().each(function() {
        widht = width + $(this).width();
    });
    console.log(width);
});

Answer 3

试试这个 -

jQuery(this).prevAll().each(function(){
  $(this).width();
});