Question

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

说我有这个清单：

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

只想展示，二，三，四和五。我怎么能用jQquery做到这一点？

Answer 1

我是用JQuery做的。它是您拥有的任意数量li的通用代码。检查this小提琴。

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");
            }
        }
    }
});

我希望这会有所帮助。

Answer 2

一个简单的CSS选择器就可以做到。

您可以简单地使用.nth-last-child来选择最后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 3

这是我用来完成此任务的脚本。 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;}

此致

如何只选择最后4个列表项？

3 个答案: