检查 <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 元素的样式，前提是少于 3 个 li's 而没有任何 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;

}

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

Check if <ul> has less than 3 <li> items and apply CSS style

css

wordpress

jquery

woocommerce

编辑