限制LI的数量并添加更多链接

时间:2012-05-13 23:14:39

标签: jquery limit

我正在动态创建多个列表,需要首先将其限制为5,然后有一个“更多”链接,该链接应该从最接近的前一个带有.parentcat类的标记中获取。

这就是我到目前为止所做的......

HTML / JQuery的

<h2><a class="parentcat" title="" href="#">Heading</a></h2>
<ul class="subcat">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
</ul>


$(function () {
    var link = ($(this).find('a.parentcat').attr('href'));

    $("ul.subcat").each(function () {
        $("li:gt(5)", this).hide(); /* :gt() is zero-indexed */
        $("li:nth-child(6)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
    });
});

这限制了LI的显示量,但变量只是找到许多a.parentcat标记中的第一个,它应该找到最接近UL的a.parentcat。也许这是一个非常愚蠢的问题,我将变量放入.after()我所做的所有尝试都失败了。

2 个答案:

答案 0 :(得分:1)

当然,您需要在each循环内检索网址。否则.attr()将始终使用jQuery对象中的第一个元素。

$("ul.subcat").each(function () {
    var link = $(this).prev('h2').find('a.parentcat').attr('href');
    $("li:gt(5)", this).hide(); /* :gt() is zero-indexed */
    $("li:nth-child(6)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
});

答案 1 :(得分:0)

您可以使用each循环并将所有href存储在数组中:

var links = [];
$('a.parentcat').each(function(i, v){
   links[i] = $(this).attr('href');
})