检查 <ul> 是否少于 3 个 <li> 项目并应用 CSS 样式

Question

当 UL 内的项目少于 3 li 时，我需要更改 ul li 项目的宽度。这是我创建的，但它不能正常工作，你能帮我解决它吗？

jQuery(document).ready(function($) {
  if ($('ul.products li').length <= 3) {
  $($this).css('width', '29%'); 
}})

该网站是http://www.demo.simplexweb.dk/shopdemo1/。它与 3 个产品的部分相关。如果有人添加新产品，css 应该不同。

谢谢， 汤姆

Answer 1

你只能像这样用 css 做到这一点：

 li:nth-of-type(1):nth-last-of-type(2),
 li:nth-of-type(2):nth-last-of-type(1){width: 50%;}

如果它是第一个类型和倒数第二个类型，这意味着如果这两个条件都为真，那么这个类型只有两个元素，那么你可以申请width: 50%;

Live Demo

尝试在ul 中添加另一个li 元素，样式将不起作用

这正是您的任务所需要的：

li:nth-of-type(1):nth-last-of-type(2),
 li:nth-of-type(2):nth-last-of-type(1){

    width: 50%;
    background-color: black;
}

li:only-of-type{  // this to still apply the style if the element is only of it's type

    width: 50%;
    background-color: black;

}

Live Demo

现在您可以在ul 内设置li's 元素的样式，前提是li's 少于3 个而没有javascript

编辑

小于或等于 3 li's :

 li:nth-of-type(1):nth-last-of-type(3),
 li:nth-of-type(3):nth-last-of-type(1),
 li:nth-of-type(2):nth-last-of-type(2){width: 50%; background-color: black;}

 li:nth-of-type(1):nth-last-of-type(2),
 li:nth-of-type(2):nth-last-of-type(1){width: 50%; background-color: black;}

li:only-of-type{

    width: 50%;
    background-color: black;

}

小于或等于 4 li's :

 li:nth-of-type(1):nth-last-of-type(4),
 li:nth-of-type(2):nth-last-of-type(3),
 li:nth-of-type(3):nth-last-of-type(2),
 li:nth-of-type(4):nth-last-of-type(1){width: 50%; background-color: black;}

 li:nth-of-type(1):nth-last-of-type(3),
 li:nth-of-type(3):nth-last-of-type(1),
 li:nth-of-type(2):nth-last-of-type(2){width: 50%; background-color: black;}

 li:nth-of-type(1):nth-last-of-type(2),
 li:nth-of-type(2):nth-last-of-type(1){width: 50%; background-color: black;}

li:only-of-type{

    width: 50%;
    background-color: black;

}