jQueryを使用して余分な項目を非表示にする（マークアップは理想的ではない）

Question

長いサブリストの要素を隠すことで、サーバー側で余分な処理を追加することなく、長いリストを短くしたい。問題は、サーバーから来るマークアップが私によって制御されておらず、仕事を簡単にするように設計されていないことです。ここにコードがあります

<ul id="long-list"> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="header"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="header"></li> 
    <li class="item"></li> 
    . 
    . 
    . 
</ul> 

あなたが気づいたように、ヘッダーはアイテムに兄弟です。今、各ヘッダーの後に3つの項目しか表示しないjQueryコードを作成し、リストを短くしてより使いやすくするために残りを隠したいとします。

$('#long-list li.header ~ li.item:gt(3)').hide(); 
    $('#long-list li.header ~ li.item:lt(3)').show(); 
    $('#long-list li.header').show(); 

余分な機能は、アイテムを隠して、各セクションの下にあるノードを追加隠されているどのように多くのアイテムと言って、5」と言っている：ここで

はない働いている私の試みですもっと...」

Answer 1

これはこれを実装した方法です。隠しアイテムがあるサブリストの最後にノードを追加する、xアイテムが隠されていること、隠しアイテムを切り替えるonclickイベントをバインドするなどのいくつかの他の機能があることに注意してください。

if ($('#list li.header')[0]) {  
     var i = -1000; 
     $("#list > li").each(function(){ 
     if ($(this).hasClass("header")) { 
      (i>3) && ($(this).before("<li class='more'>" + (i-3) + " more...</li>").bind("click", toggle_more()) ); 
      i = 0; 
     } 
     else { 
      i = i+1; 
     } 
     $(this).toggle(i<=3); 
     }); 
    } 

これは基本的に上記のsvintoに基づいています。私はまだより良いパフォーマンスを探します。とにかく、今、私は結果に満足しています。

iを-1000で開始すると、リストの先頭にある項目がヘッダーを持たないように表示されなくなります。ヘッダーに達すると、iを0に設定してカウントを開始します。

Answer 2

は良く行うことが可能かもしれないが、これは動作するはずです：

var i = 0; 
$("#long-list li.header:first").nextAll("li").each(function(){ 
    i = $(this).hasClass("header") ? 0 : i+1; 
    $(this).toggle(i<=3); 
}); 

（最初の前の項目を非表示にしないように更新しますヘッダー）

Answer 3

jqueryではループなしでこれを行うことはできません。

Answer 4

これは私にとってはうまくいくようですが、論理的には、兄弟セレクタだけを使ってオリジナルの試みの意図に従っているようです。

$("li.header:first").prevAll("li.item").hide(); 
    $("li.header").each(function() { 
    $(this).nextAll("li.item:lt(3)").show(); 
    $(this).nextAll("li.item:gt(3)").hide(); 
    });