jquery - 在UL中仅显示15个列表项

Question

我有一个由WordPress生成的列表，我没有办法限制通过它自己的功能显示多少标签。

使用jQuery我决定这样做只显示前15个：

$j(function(){
    if( $j('#popular-tags').length > 0 ){
        var displayAmt = 15;

        var list = $j(this).find('ul');
        for(var i=1; i <= displayAmt; i++ ){
            ....
        }
    }
});

我对如何遍历每个列表项有点迷失。 但我有一个名为.not-display的类，我想添加到相应的列表项。 我也不确定是否需要使用jQuery提供的.each()函数。

有人可以开导我吗？

Answer 1

你会发现大多数时候，jQuery不需要循环：

var displayAmt = 15;
$j('#popular-tags li').slice(displayAmt).hide();

此代码查找#popular-tags div中的所有li元素，使用slice()获取第15个元素之后的每个元素，并对它们全部调用hide() 。 如果您愿意，也可以选择调用remove() 。

Answer 2

我建议使用lt选择器 ，它采用从零开始的索引：

$("ul > li:lt(15)").show();

Answer 3

与Karims相反，使用gt选择器回答

$("ul > li:gt(14)").hide();  

或者如果你想申请你的课程：

$("ul > li:gt(14)").addClass("not-display");

Answer 4

你可以试试Show First N Items jQuery插件 。 所有你需要写的是：

<ul class="show-first" data-show-first-count="15"  data-show-first-has-control="false">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
</ul>

它会自动转换为：

<ul class="show-first" data-show-first-count="15" data-show-first-has-control="false">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li style="display: none;">16</li>
    <li style="display: none;">17</li>
    <li style="display: none;">18</li>
    <li style="display: none;">19</li>
    <li style="display: none;">20</li>
</ul>

Fyi，我为这个插件贡献了代码。