根据宽度添加.class到<li>元素,但添加.class后它们的宽度也会改变

Question

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

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

我使用的是非常简单的无序列表;

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

(列表元素的数量N在每页上都有所不同.)

在div其中包含ul是696 px宽度.列表元素li是水平对齐的,当它们到达div宽度的末尾时,它们会在新行上进行转换.

我想要在每一行中添加.left第li一个类,并将类添加.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/