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

我有一个由WordPress生成的列表，我无法限制要通过自身功能显示的标签数量。jquery - 在UL中只显示15个列表项目

使用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()函数。

有人能够启发我吗？

来源

2011-03-29 Nils_e

你会发现，大多数的时候，一个循环是没有必要使用jQuery：

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

这个代码是找到了#popular-tags专区内的所有li元素，采用slice() 15日之后取得每一个元素元素，并在它们上面调用hide()。如果您愿意，您也可以选择拨打remove()。

来源

2011-03-29 00:23:06

+1永远不够快'：）'，即将做同样的事情。 http://jsfiddle.net/markcoleman/4uVrn/ – 2011-03-29 00:28:14

比我要去的路线简单得多。我习惯于低级别的Java编程（在循环中繁荣），所以即时通讯仍然使用jquery ty：D – 2011-03-29 00:29:26

我会建议使用lt selector，这需要一个从零开始的索引：

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

来源

2011-03-29 00:24:18 karim79

以Karims答案相反使用gt selector

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

，或者如果要应用类：

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

来源

2011-03-29 00:34:47

-1

您可以尝试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>

仅供参考，我贡献的代码到这个插件。

来源

2014-06-16 16:08:56

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

回答

相关问题