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();

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

Answer 2

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

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

Answer 3

采用与gt selector

相反的Karims回答

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

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

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

Answer 4

您可以尝试Show First N Items jQuery Plugin。所有你需要写的是：

<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，我为这个插件贡献了代码。

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

4 个答案: