jquery - 为列表中的最后一行元素添加类

标签 jquery css xhtml

<ul class="list_availability">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

样式 3 的结果会是这样 <li>在每一行中

|_|_|_|
|_|_|_|
| | | |

|_|_|_|
|_|_|_|
| | |

|_|_|_|
|_|_|_|
| |

我想为 <li> 添加一个类(使用 jQuery)在最后一行,即使它同时具有 3、2、1 项


尝试澄清...

CSS 布局了 <li>每行 3 个元素。

问题是总数 <li>元素并不总是能被 3 整除, 所以最后一行可能有 1 , 2 , 或 3元素。

我想做的是向 <li> 添加一个类就在最后一行。当我不知道会有多少元素时,我如何才能只定位这些元素?

最佳答案

您可能需要这样计算:

lastRowItemsCount = ($("ul.list_availability li").length % 3);
if (lastRowItemsCount == 0) lastRowItemsCount = 3;
$("ul.list_availability li").slice(-lastRowItemsCount).addClass("lastRow");​

这只会为最后一行的元素添加一个类。

少于3件只需要处理即可。但这很容易,对吧? ;)

您可以在这里通过添加或删除 <li> 来测试它元素: http://jsfiddle.net/7bx6v/2/

关于jquery - 为列表中的最后一行元素添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9635350/

相关文章:

jquery - 当有新记录自动显示时,如何刷新 Ruby on Rails View 中的表

"show"动画后的 jQuery 选项卡回调

php - 上传文件,表格中的表格

html - 媒体查询中无法识别 flex 元素的宽度属性

html - 为什么视差不能使用 html css

java - Xpath - 如何获取元素之间包含的数据,而不是元素本身

html - 如何将这个 4 列表转换为单列表,但仍保持表的可访问性

javascript - 当焦点位于其他窗口时停止运行 Javascript Web 应用程序的方法

javascript - 滞后的 Safari 动画

html - 防止 iframe "This webpage is not available."错误在网站上显示