ビューで生成されたリスト内の最後の <li> に「最後の」クラスを追加するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/113702

  •  02-07-2019
  •  | 
  •  

質問

最後に「last」クラスを追加するにはどうすればよいですか <li> ビューで生成されたリスト内でしょうか?

役に立ちましたか？

解決

を使用できます 最後の子 これを実現するには li 要素の pseudo-class

<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 で機能するかどうかはわかりません。

他のヒント

あるいは、特定のブラウザが最後の子クラスをサポートしていない場合は、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";
    }
}

その pesudo クラスを使用できます 最後の子, 第一子 まず最初に、または n番目の子 何人の子供に対しても

li:last-child{
    color:red;
    font-weight:bold;
}

jquery は Drupal にバンドルされていますか。そうであれば、使用できます 

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

これを達成するために

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top