如何 select 只有最后 4 个列表项？

Question

我只想显示最后四个列表项。

假设我有这个列表：

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li
</ul>

并且只想显示二、三、四和五。我怎样才能用 jQquery 做到这一点？

Answer 1

一个简单的CSSselect还是可以的

您可以简单地使用 .nth-last-child 到 select 最后 4 项：

ul li{
    display : none;
}

ul li:nth-last-child(-1n+4){
    display : block;
}

如果必须支持 ie8 及更低版本，请使用 jQuery :

$('ul li:nth-last-child(-1n+4)').show()

Answer 2

这是我用来完成此任务的脚本。 HTML 是

   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
  </ul>

这是脚本

   $(function(){   
    $('ul li:nth-child(1)').hide();
  });

这就是您可以使用 css

的方式

ul li:nth-child(1){display:none;}

此致

Answer 3

我用 JQuery 做到了。它是您拥有的任意数量 li 的通用代码。检查 this fiddle.

li {
    display:none;
}

和

$(document).ready(function () {
   // alert();
    ShowHide();

    function ShowHide() {
       // alert($("ul"));
        $("ul").each(function () {

            if ($(this).children("li").length >= 4) {
                AddDisplay(4,$(this));

            } else AddDisplay($(this).children("li").length,$(this));
        });
    }

    function AddDisplay(num,obj) {
        if (num != null && num != undefined && num <= 4) {
            for (var i = 1; i <= num; i++) {
               // alert(obj.children("li:eq(-" + i + ")").html());
                obj.children("li:eq(-" + i + ")").css("display", "block");
            }
        }
    }
});

希望对您有所帮助。

如何 select 只有最后 4 个列表项？

How to select only the 4 last list items?

jquery

listitem