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，我為這個插件貢獻了代碼。