如何在"视图"生成的列表中的最后一个上添加"最后"类?

时间:2020-03-06 14:31:42  来源:igfitidea点击:

如何在"视图"生成的列表中的最后一个" <li>"上添加"最后一个"类?

解决方案

我们可以在li元素上使用last-child伪类来实现此目的

<html>
<head>
<style type="text/css">
ul li:last-child
{
font-weight:bold
}
</style>
</head>
<body>
<ul>
<li>IE</li>
<li>Firefox</li>
<li>Safari</li>
</ul>
</body>
</html>

还可以使用第一个孩子的伪类。

我不确定last-child元素是否可以在IE中使用。

jQuery是否与drupal捆绑在一起,如果可以,则可以使用

$('ul>li:last').addClass('last');

为了达成这个

另外,如果某些浏览器不支持last-child类,则可以通过JavaScript来实现。例如,此脚本可以为所有" ul"标签中的最后一个" li"元素设置类名,尽管它可以轻松地适用于其他标签或者特定元素。

function highlightLastLI()
{
    var liList, ulTag, liTag;
    var ulList = document.getElementsByTagName("ul");
    for (var i = 0; i < ulList.length; i++)
    {
        ulTag = ulList[i];
        liList = ulTag.getElementsByTagName("li");
        liTag = liList[liList.length - 1];
        liTag.className = "lastchild";
    }
}