jquery - 特定の数を超える場合、リスト内のliの数を切り捨てます

Question

私は次のことを達成したいと思います：

特定の ul 内に 12 以上の li がある場合は、最後のものを "..." に置き換え、12 番目以降に表示されるものを非表示にします。

誰かが私の方法でいくつかのポインターを投げることができますか?

Answer 1

これを試して：

$('#myList > li:eq(11)').nextAll().hide().end().after('<li>...</li>'); 

フィドル

メソッドで提供されるインデックスeq()はゼロベースであり、DOM ツリー内ではなく、jQuery オブジェクト内の要素の位置を参照することに注意してください。したがって、eq(11)ここでは項目 12 を意味します。

Answer 2

ここに作業フィドルがあります： http://jsfiddle.net/acturbo/w3yep/7/

サンプル HTML:

<ul id="mylist">
    <li>1 </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5 last one to see</li>
    <li>6 will be truncated</li>
    <li>7 will be truncated</li>
    <li>8 will be truncated </li>
</ul>  

jquery:

$(document).ready(function () {
   var maxToShow = 5;

    $("#mylist li").each( function(i, e){
        // truncate all li elements after the 5th
        if ( i >= maxToShow){
            // $(e).remove(); // remove it
            $(e).hide(); // or hide it
        }
    });

});