2009-04-29 51 views
1

我想通過隱藏長子列表中的一些元素而不添加額外的處理在服務器端做出長長的列表。問題是來自服務器的標記不受我控制,並且沒有設計成使我的工作變得簡單。這裏是代碼在棘手的情況下使用jQuery在列表中隱藏額外的項目(標記並不理想)

<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> 

正如你已經注意到頭是兄弟的項目。現在,我想要一個jQuery代碼,在每個標題後面只顯示3個項目,並隱藏剩餘的代碼以使列表變得更短,更實用。

這裏是我的嘗試是工作:

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

額外的功能,在已經隱藏的項目每個部分的底部添加節點,說有多少項目已被隱藏,說「5更多...」

回答

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。我仍然期待更好的表現。無論如何,現在我對結果感到滿意。

用-1000啓動我可以確保我們不會隱藏沒有任何標題的列表頂部的項目。一旦我們達到頭部,我們將把i設置爲零並開始計數。

3

也許可以做得更好,但這應該工作:

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

(更新之前先不要隱藏物品)

+0

非常感謝,但首先,列表可能會很長,循環遍歷每個項目可能會帶來甚至現代瀏覽器膝蓋...... 第二,正如我在示例代碼中列出的那樣,列表的開頭部分所有不屬於任何標題的項目都不應被隱藏。 – 2009-04-29 19:59:53

0

你不能在沒有jQuery循環的情況下做到這一點。

0

這似乎爲我工作,似乎邏輯上遵循您的原始嘗試只使用兄弟選擇器的意圖。

$("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(); 
    }); 
相關問題