私の順序付けられていないリストは、3 つの項目が 1 行に表示されるように各項目をフロートします。
アイテムの最終行に特定のスタイルを適用する必要があります。私は現在 ::nth-child 疑似クラスを使用していますが、問題は、これらのリストのいくつかの最後の行に 1、2、または 3 つの項目があることにあります。
どのアイテムが最後の行にあるかをjqueryに把握させ、それらのアイテムに特定のスタイルを適用できるようにクラスを適用するにはどうすればよいですか?
私の順序付けられていないリストは、3 つの項目が 1 行に表示されるように各項目をフロートします。
アイテムの最終行に特定のスタイルを適用する必要があります。私は現在 ::nth-child 疑似クラスを使用していますが、問題は、これらのリストのいくつかの最後の行に 1、2、または 3 つの項目があることにあります。
どのアイテムが最後の行にあるかをjqueryに把握させ、それらのアイテムに特定のスタイルを適用できるようにクラスを適用するにはどうすればよいですか?
これが最善の解決策かどうかはわかりませんが、mod 演算子を使用して最後の行の数字を見つける方法を次に示します。
$('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 項目未満を考慮して更新。