javascript - 如何限制列表中值的数量？

Question

我有一个具有许多不同值的 div，如下所示：

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

对于此示例，假设我只想显示前 3 个数字或<li>元素。我怎样才能做到这一点？我觉得答案真的很简单，但我一辈子都不记得该怎么做。

Answer 1

如果您只想显示三个li元素，您的问题是模棱两可的：

$('li:gt(2)').hide();

JS 小提琴演示。

使用 CSS：

li:nth-child(3) ~ li {
    display: none;
}

JS 小提琴演示。

如果要隐藏li文本值大于的所有元素3：

$('li').filter(function () {
    return parseFloat($.trim($(this).text())) > 3;
}).hide();

JS 小提琴演示。

Answer 2

尝试这个

http://api.jquery.com/slice/

$('ul').children().hide().slice(0,3).show();

Answer 3

你可以这样做：

$('li:gt(2)').hide();

只显示前三个<li>元素。

Answer 4

尝试这样的事情

JAVASCRIPT代码

        $(function(){
            $( "#sample_div > ul >li:gt(2)" ).hide();
        })

代码

    <div id="sample_div">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>

Answer 5

您可以这样做，也可以以任何方式更改隐藏回调。

$.fn.showOnly = function(n) {
    return $(this).each(function(i) {
        if (i < n) $(this).show();
        else $(this).hide();
    });
};

$("ul li").showOnly(2);