jquery - 如何在悬停时计算所有先前的“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();
});