使用 jquery 在 <ul> 中查找最后一行并应用一个类答案

【问题标题】：Using jquery to find last row in <ul> and apply a class使用 jquery 在 <ul> 中查找最后一行并应用一个类
【发布时间】：2013-11-15 13:38:11
【问题描述】：

我的无序列表会浮动每个项目，以便 3 个项目出现在一行上。

我需要将某种样式应用于项目的底线。我目前正在使用 ::nth-child 伪类，但问题在于其中一些列表在最后一行有 1、2 或 3 个项目。

如何让 jquery 找出最后一行中的项目，并应用一个类以便我可以将特定样式应用于这些项目？

【问题讨论】：

您的 HTML 结构示例会有所帮助。

标签： jquery css css-selectors

【解决方案1】：

不确定这是否是最佳解决方案，但这里有一个使用 mod 运算符查找最后一行中的数字的方法：

http://jsfiddle.net/V8edM/

$('ul').each(function () {
    var $lis = $('li', this);
    var count = $lis.length;

    if (count < 4) {
        $lis.addClass('last-row');

    } else {
        var numberInLastRow = count % 3 || 3;
        $lis.eq(-1 * numberInLastRow - 1).nextAll().addClass('last-row');

    }
});

编辑 - 更新为少于 4 个项目。

【讨论】：

我认为他的问题是他不知道每行可以容纳多少个项目，因此与模一起使用的常数将是未知的，除非它是根据当前 DOM 计算的。跨度>
@LiorCohen 他问题中的第一句话：“我的无序列表浮动每个项目，因此 3 个项目出现在一行上。”
我想我在不应该概括问题的时候。如果他知道 3 是有保证的，那么您的答案应该被接受为正确的。无论如何都要删除我的，因为它不完整。
@LiorCohen 我假设他确实知道。如果他不这样做，问题就会变得更加复杂。
是的，代码需要在元素存在后执行。如果它们在页面加载时存在，只需将代码包装在 $(function({...}) 或 $(document).ready(function() {...})