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 Fiddle demo

使用CSS：

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

JS Fiddle demo

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

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

JS Fiddle demo

Answer 2

试试这个

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

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

Answer 3

你可以这样做：

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

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

Answer 4

尝试这样的事情

JAVASCRIPT CODE

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

HTML CODE

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

Answer 5

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

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

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

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

5 个答案: