如何限制列表中的值数

How do I limit the number of values in a list?

本文关键字：何限制 列表      更新时间：2023-09-26

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

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

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

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

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

JS小提琴演示。

使用 CSS：

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

JS小提琴演示。

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

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

JS小提琴演示。

试试这个

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

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

你可以做：

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

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

尝试这样的事情

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>

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

$.fn.showOnly = function(n) {
    return $(this).each(function(i) {
        if (i < n) $(this).show();
        else $(this).hide();
    });
};
$("ul li").showOnly(2);
相关文章：