如何使用Jquery截斷長無序列表？

我使用wordpress來顯示類別列表，按字母順序排序。我想用jQuery在前20個鏈接之後附加一個「read more」鏈接。當用戶點擊「閱讀更多」時，其他類別會下滑/出現。列表中的HTML格式如下：如何使用Jquery截斷長無序列表？

<ul id="catA"> 
    <h2>Categories</h2> 
    <li class="cat-item"> 
     <a title="title" href="#">Category Name</a> 
    </li> 
    <li class="cat-item"> 
     <a title="title" href="#">Category Name</a> 
    </li> 
    <li class="cat-item"> 
     <a title="title" href="#">Category Name</a> 
    </li> 
    ... 
</ul>

我想<a href="#">view all categories</a>被附加到20rh類別後的名單，之後，隱藏的一切。在我嘗試編寫代碼之前，有什麼想法可以解決這個問題？

來源

2011-12-16 JCHASE11

這是最簡單的解決方案，但可能工作：

讓「視圖中的所有」名單後創建的鏈接，並給它像「＃CATA-viewall」的ID;
隱藏所有項目;
只顯示前20個;

點擊'查看全部'，我們顯示所有的元素。

var $items = $('#catA').children(); 
if ($items.length > 20) { 
    $items.hide().slice(0, 20).show(); 
    $('#catA-viewall').click(function() { 
     $items.fadeIn(); // or .show() 
     $(this).remove(); 
    }); 
} else { 
    $('#catA-viewall').remove(); 
}

來源

2011-12-16 22:36:49

我會用:eq() selector（注意，這是零索引），添加您的查看全部鏈接找到20 li元素後，再利用:gt() selector的選擇和隱藏額外li元素。您需要將附加事件處理程序添加到查看所有鏈接，以顯示隱藏的鏈接並將其自行刪除。

來源

2011-12-16 22:35:33 nachito

不知道的GT選擇。謝謝！ – JCHASE11 2011-12-16 22:46:41

我會做這樣的：

$('ul#catA').children('li').each(function (i) 
{ 
    if (i > 19) 
    { 
     $(this).hide(); 
    } 
}); 

var more = $('<li class="cat-item"><a href="">Show More</a></li>'); 
$('ul#catA').append(more); 

more.find('a').on('click', function(){ 
    $(this).parent().siblings('li').show(); 

    return false; 
});

這裏是在我的操作方法的jsfiddle。

我根據@ nachito對使用:gt()選擇推薦創建更新的jsfiddle。我還添加了一些解釋發生了什麼的評論。

來源

2011-12-16 22:35:57 JesseBuesking

偉大的方法，有時我希望我可以選擇兩個很好的答案。謝謝！ – JCHASE11 2011-12-16 22:46:21

如何使用Jquery截斷長無序列表？

回答

相關問題