-1

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

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

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

4

5 回答 5

2

如果您只想显示三个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 小提琴演示

于 2013-10-30T08:30:10.960 回答
1

尝试这个

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

$('ul').children().hide().slice(0,3).show();
于 2013-10-30T08:23:10.183 回答
0

你可以这样做:

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

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

于 2013-10-30T08:22:43.957 回答
0

尝试这样的事情

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>
于 2013-10-30T08:24:25.040 回答
0

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

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

$("ul li").showOnly(2);
于 2013-10-30T08:27:40.903 回答