javascript - <li>元素根据宽度添加.class，但添加.class后宽度也发生变化

Question

您可以在 http://jsfiddle.net/6gnAF/1/ 上查看问题

我的列表元素没什么问题。

我正在使用非常简单的无序列表；

<div>
  <ul>
    <li class='button'>Element 1</li>
    ...
    <li class='button'>Element N</li>
  </ul>
</div>

(列表元素的数量，N，每页不同。)

包含 ul 的 div 是 696 px 宽度。列表元素 li 水平对齐，当它们到达 div 宽度的末端时，它们会换行。

我想在每行的第一个 li 中添加 class .left，在最后一行添加 class .right。

    $('li').each(function() {
        var liWidthOut = $(this).width();
        totalWidth += liWidthOut;
        if (totalWidth >= divWidth) {
            $(this).addClass("left");
            $(this).prev().removeClass("middle").addClass("right");
            totalWidth = liWidthOut;
        }
        else {
            $(this).addClass("middle");
        }
     });

我用 Jquery 解决了这个问题，但我遇到了一个小问题。

您可以在 http://jsfiddle.net/6gnAF/1/ 上查看问题

问题是，.left 和.right 类改变了添加的li 元素的宽度到，所以有时他们会创建新行，最后的 li 元素成为第一个具有 .right 类的元素，而不是 .left。

我该如何解决这个问题？

(抱歉语法错误)

Answer 1

我将方法更改为跟踪 top 位置而不是计算宽度，似乎工作正常。将 width() 与填充和边框等一起使用不太可靠。

$('li')
    // Add classes first, so we calculate on the right styles
    .addClass("middle")
    .addClass("button")
    .each(function() {
        // Compare with last position
        if (lastPos != $(this).position().top) {
            $(this).removeClass("middle").addClass("left")
                .prev().removeClass("middle").addClass("right");
        }
        // Store last position
        lastPos = $(this).position().top;
    });

http://jsfiddle.net/2qydM/6/