Question

上看到问题

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

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

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

（列表元素的数量N，每页都有所不同。）

包含div的{{1}}宽度为ul。列表元素696 px是水平对齐的，当它们到达div宽度的末尾时，它们会在新行上继续。

我希望将每个行的第一个li添加到.left，将li添加到最后一行。

.right

我用Jquery管理过，但我有点问题。

您可以在http://jsfiddle.net/6gnAF/1/

上看到问题

问题是，$('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"); } });和.left类会更改添加到的.right元素的宽度，因此有时会创建新行，并且最后一个li元素成为第一个具有li类而不是.right的元素。

我该如何解决这个问题？

（对不起语法错误）

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/

Answer 2

你的代码大多是正确的，只是两个挑剔的错误：

使用var liWidthOut = this.offsetWidth;代替var liWidthOut = $(this).width();，因为后者会给你内心的宽度文本，而不是像offsetWidth那样添加填充。
在开始循环和计算之前应用.button类宽度，因为.button样式会影响元素的宽度，你必须这样做首先应用它，以便您的计算不会在以后失败。

请更正您的代码working demo。

Answer 3

是否可以将这些列表分成单独的列表？

如果是这样，您可以使用:nth-child或:last-child

根据元素的宽度将.class添加到<li>元素，但添加.class </li>后它们的宽度也会发生变化

3 个答案: